/*COLOR PARA TEXTOS*/
/*Comunicado BTT*/
    .titulo-btt {
    color: #F9B233;
  }
  /*Comunicado UNI*/
  .titulo-uni {
    color: #009FE3;
  }
  /*Banner POS*/
  .titulo-pos{
  color: #132C45;
  }
  /*Banner EGR*/
      .titulo-egr{
      color: #878787;
  }

/*Listas alineadas*/
li {
    text-align: left;
}

 /* RVOE UNI*/
#rvoe-lincae a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s ease;
}

#rvoe-lincae a:hover {
    color: #009FE3;
}

/* RVOE POS*/
#rvoe-posae a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s ease;
}
#rvoe-posae a:hover {
    color: #132C45;
}

/*offcanvas*/
.offcanvas-ancho {
    width: 60% !important; 
    max-width: 900px;
}


@media (max-width: 768px) {
    .offcanvas-ancho {
        width: 100% !important;
    }
}


/*Botones PDF UNI FOLLETO*/
.btn-pdf-ubam {
    background-color: #009FE3;
    border-color: #009FE3;
    color: #fff;
}

.btn-pdf-ubam:hover {
    background-color: #008dc9;
    border-color: #008dc9;
    color: #fff;
}

/*Botones PDF POS*/
.btn-pdf-ubamPOS {
    background-color: #132C45;
    border-color: #132C45;
    color: #fff;
}
.btn-pdf-ubamPOS:hover {
    background-color: #051d34;
    border-color: #051d34;
    
    color: #fff;
}

/*Botones PDF EGRE*/
.btn-pdf-ubamEGRE {
    background-color: #878787;
    border-color: #878787;
    color: #fff;
}
.btn-pdf-ubamEGRE:hover {
    background-color: #696969;
    border-color: #696969;
    color: #fff;
}

/* Hacer que el dropdown se active con hover */
        
    @media (min-width: 992px) {
        .navbar .dropdown:hover .dropdown-menu {
            display: block;
            margin-top: 0;
        }
    }

    .menu-anclado {
        background-color: #ffffffc3 !important;
        position: sticky;
        top: 0;
        z-index: 999;
        width: 100%;
        
    }
    .navbar .nav-link {
        color: #009FE3 !important;
    }
    .navbar .nav-link:hover {
        color: #f5f5f5 !important;
    }
    .dropdown-menu {
        background-color: rgba(250, 250, 250, 0.926);
    }
    .dropdown-item {
        color: #009FE3;
    }
    .dropdown-item:hover {
        background-color: #e6e6e6dd;
        color: #008dc9;
    }

/*Botones videos*/
.btn-video-ubam-btt {
    background: linear-gradient(135deg, #F9B233, rgb(209, 154, 3));
    color: #fff;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-video-ubam-btt:hover {
    transform: scale(1.05);
}


.btn-video-ubam-uni {
    background: linear-gradient(135deg, #009FE3, #009FE3);
    color: #fff;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-video-ubam-uni:hover {
    transform: scale(1.05);
}

    
/*Circulos identidad UBAM*/
  .section-circles {
   font-family: 'Segoe UI', sans-serif;
    }
    .section-circles .circle-wrapper {
      width: 150px;
      height: 150px;
      margin: 0 auto 15px;
      border-radius: 50%;
      overflow: hidden;
      transition: transform 0.3s ease;
    }
    .section-circles .circle-wrapper:hover {
      transform: scale(1.05);
      cursor: pointer;
    }
    .section-circles .circle-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .section-circles h3 {
      font-weight: 600;
      color: #555;
    }
    .section-circles p {
      font-size: 0.95rem;
      color: #666;
    }
    .section-circles .btn {
      border-radius: 6px;
      font-size: 0.9rem;
    }

/* Circulos sección Salud */
.section-circles-salud {
  font-family: 'Segoe UI', sans-serif;
}

.section-circles-salud .circle-wrapper {
  width: 100px;     
  height: 100px;     
  margin: 0 auto 10px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.section-circles-salud .circle-wrapper:hover {
  transform: scale(1.08);
  cursor: pointer;
}

.section-circles-salud .circle-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-circles-salud h3 {
  font-weight: 600;
  color: #555;
}

/* Cards Oferta educativa */
.card-ofeac {
transform: scale(0.9); 
margin: auto;
}
.card-ofeac .card-img-top {
height: 280px;
object-fit: contain;
padding: 10px;
}

.card-ofeac .card-body {
padding: 0.75rem;
}
.card-ofeac .card-title {
font-size: 1rem;
margin-bottom: 0.25rem;
}
.card-ofeac.card-text {
font-size: 0.8rem;
line-height: 1.2;
}
.card-ofeac:hover {
transform: scale(0.95);
}


/* Eventos */
    .eventos-grande {
      position: relative;
      overflow: hidden;
      height: 400px;
      cursor: pointer;
    }
    .eventos-grande img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .eventos-texto {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 20px;
      color: white;
      background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
      width: 100%;
    }
    .eventos-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #175d7780; 
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.5rem;
      font-weight: bold;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

  .eventos-grande:hover .eventos-overlay {
      opacity: 1;
    }
    .eventos-mini {
      max-height: 400px;
      overflow-y: auto;
    }
    .eventos-mini img {
      width: 100%;
      height: 80px;
      object-fit: cover;
      cursor: pointer;
      border-radius: 5px;
    }
    .eventos-mini .card {
      margin-bottom: 10px;
      border: none;
    }
    /* Modal al 90% de pantalla */
    #eventosModalDialog {
      max-width: 90vw;      
      height: 90vh;          
      margin: auto;
    }

    #eventosModal .modal-content {
      background: rgba(114, 188, 217, 0.428); 
      border: none;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    #eventosModal .modal-body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }

 
    #eventosModal img {
      width: 90%;
      height: auto;
      object-fit: contain;
      transition: transform 0.3s ease;
      position: absolute;
      top: 20px;   
      left: 50%;
      transform: translateX(-50%);

    }

/*Actividades extracurriculares*/
  .modal-img-container {
      position: relative;
      display: inline-block;
      width: 100%;
    }

    .modal-img-container img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
    }

    .img-overlay {
      position: absolute;
      bottom: 10px;
      left: 10px;
      background: #009FE3;
      color: white;
      padding: 8px 12px;
      border-radius: 5px;
      max-width: 90%;
    }

    .img-overlay .fecha {
      font-size: 0.9rem;
      font-weight: bold;
    }

    .img-overlay .descripcion {
      font-size: 0.8rem;
    }
    .container img {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
    }

    .container img:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); 
    }



/*Radio UBAM*/
    .radio-player {
      background-color: #132C45;
      color: white;
      border-radius: 1rem;
      padding: 1.5rem;
      max-width: 400px;
      margin: 2rem auto;
      text-align: center;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }

  .radio-player img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
  }

  .btn-custom {
      background-color: #ffffff;
      color: #009FE3;
      font-weight: bold;
      border: none;
  }

  .btn-custom:hover {
      background-color: #e0e0e0;
  }

#ubam-floating-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

#ubam-floating-widget .ubam-social-icons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#ubam-floating-widget .ubam-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    text-decoration: none;
    transition: all 0.3s ease;
}

#ubam-floating-widget .ubam-icon:hover {
    transform: scale(1.1);
}

/*Redes sociales Bachillerato*/
#ubam-floating-widget.bachillerato .ubam-icon {
    background: #f9b03394;
}
#ubam-floating-widget.bachillerato .ubam-icon:hover {
    background: #F9B233; 
}

/*Redes sociales Universidad*/
#ubam-floating-widget.universidad .ubam-icon {
    background: #009fe3c4;
}
#ubam-floating-widget.universidad .ubam-icon:hover {
    background: #009FE3; 
}

/*Redes sociales Posgrado*/
#ubam-floating-widget.posgrado .ubam-icon {
    background: #132c45b8;
}
#ubam-floating-widget.posgrado .ubam-icon:hover {
    background: #132C45;
}

/*Redes sociales General*/
#ubam-floating-widget.general .ubam-icon {
    background: #009fe3c4;
}
#ubam-floating-widget.general .ubam-icon:hover {
    background: #009FE3; 
}

/*Redes sociales General inferior*/
#ubam-floating-widget.general2 .ubam-icon {
    background: #009fe3c4;
}
#ubam-floating-widget.general2 .ubam-icon:hover {
    background: #009FE3; 
}


/* Oso salud */
    .oso-salud{
        position: fixed;
        bottom: 150px;
        left: 25px;
        max-width: 100px;
        width: 100%;
        height: auto;
        z-index: 1000;
        transition: transform 0.3s ease;
    }
    .oso-salud:hover {
        transform: scale(1.2);
    }

/* Oso ir a inicio de la página */
    .oso-inicio {
        position: fixed;
        bottom: 30px;
        left: 25px;
        max-width: 100px;
        width: 100%;
        height: auto;
        z-index: 1000;
        transition: transform 0.3s ease;
    }
    .oso-inicio:hover {
        transform: scale(1.2);
    }

/*Estilo colores del footer*/
    .custom-footer {
    background-color:#132C45; 
    color: white; 
    }

/*inicio comunidad*/
.hero-section {
      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
      padding: 50px 20px;
      border-radius: 20px;
      margin-top: 20px;
    }
    .hero-img {
      max-width: 100%;
      border-radius: 20px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }
    .hero-text h1 {
      font-size: 2.5rem;
      font-weight: bold;
      color: #212529;
    }
    .hero-text p {
      font-size: 1.1rem;
      color: #555;
    }
    .accesos-section {
      margin-top: 40px;
    }
    .acceso-card {
      text-align: center;
      padding: 25px;
      border-radius: 18px;
      background: #ffffff;
      box-shadow: 0 6px 15px rgba(0,0,0,0.1);
      transition: transform 0.3s, box-shadow 0.3s;
      cursor: pointer;
    }
    .acceso-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }
    .acceso-card i {
      font-size: 2.2rem;
      color: #009FE3;
      margin-bottom: 12px;
    }
    .acceso-card h5 {
      font-weight: 600;
      margin-bottom: 8px;
    }

/*******comunidad escolar*******/

#comunicado-directorio .card-dir {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

#comunicado-directorio .card-dir:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px #0000001a;
}

#comunicado-directorio .nav-tabs .nav-link {
  color: #555;
  font-weight: 500;
}

#comunicado-directorio img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.comunicado-btt .btn-primary {
  background-color: #F9B233;
  border-color: #F9B233;
}

.comunicado-btt .btn-primary:hover {
  background-color: #f5b301b3;
}

.comunicado-btt .nav-tabs .nav-link.active {
  background-color: #f5b301;
  color: #fff;
}
.comunicado-uni .btn-primary {
  background-color: #009FE3;
  border-color: #009FE3;
}

.comunicado-uni .btn-primary:hover {
  background-color: #0081b9;
}

.comunicado-uni .nav-tabs .nav-link.active {
  background-color: #009FE3;
  color: #fff;
}
.comunicado-pos .btn-primary {
  background-color: #132C45;
  border-color: #132C45;
}

.comunicado-pos .btn-primary:hover {
  background-color: #0a2b4c;
}

.comunicado-pos .nav-tabs .nav-link.active {
  background-color: #132C45;
    border-color: #132C45;
    color: #fff;
}
.comunicado-egre .btn-primary {
  background-color: #878787;
  border-color: #878787;
}

.comunicado-egre .btn-primary:hover {
  background-color: #878787;
}

.comunicado-egre .nav-tabs .nav-link.active {
  background-color: #878787;
  color: #fff;
}

/*seccion titulación*/
.seccion-titulacion {
      padding: 50px 20px;
      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    }
    .titulacion-title {
      font-size: 2.2rem;
      font-weight: bold;
      text-align: center;
      margin-bottom: 40px;
      color: #212529;
    }
    .card-titulacion {
      border: none;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 6px 15px rgba(0,0,0,0.1);
      transition: transform 0.3s;
      background: #ffffff;
    }
    .card-titulacion:hover {
      transform: translateY(-8px);
    }
    .card-titulacion .card-body {
      text-align: center;
      padding: 25px;
    }
    .btn-infografia {
      margin-top: 15px;
      background: #009FE3;
      color: white;
      border-radius: 30px;
      padding: 10px 20px;
      transition: background 0.3s;
    }
    .btn-infografia:hover {
      background: #009FE3;
      color: #fff;
    }
    /* Imagen dentro del modal */
    .modal-img {
      max-width: 100%;
      border-radius: 12px;
    }

/* Estilos para popup PROMOCIOMA */
  .popup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      padding: 20px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      z-index: 1001;
  }
  .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
  }


/*Testimonios */
 .testimonial-section {
    font-family: 'Poppins', sans-serif;
  }

  .testimonial-images {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .testimonial-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 4px solid transparent;
    transition: all 0.3s ease;
  }

  .testimonial-img.active {
    border-color: #009FE3;
    transform: scale(1.1);
  }

  .testimonial-text {
    font-size: 16px;
    color: #555;
  }

  .testimonial-name {
    color: #000;
    letter-spacing: 1px;
  }


/*REGLAMENTO*/
#modalReglamentoUni .modal-dialog {
    max-width: 95vw;   
    width: 95vw;
}

#reglamentoWrapper .reg-galeria-layout {
    display: grid;
    grid-template-columns: 80% 20%;
    gap: 20px;
}

#reglamentoWrapper .reg-galeria-principal {
    width: 100%;
    aspect-ratio: 1 / 1.294;
    max-height: 820px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
    cursor: pointer;
    background: #eaeaea;
}

#reglamentoWrapper .reg-galeria-principal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: white;
}

#reglamentoWrapper .reg-galeria-sidebar {
    height: 420px;
    overflow-y: auto;
    padding-right: 8px;
}

#reglamentoWrapper .reg-galeria-thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#reglamentoWrapper .thumb-mini {
    height: 90px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    transition: .2s ease;
}

#reglamentoWrapper .thumb-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#reglamentoWrapper .thumb-mini:hover {
    transform: scale(1.03);
}

#reglamentoWrapper .reg-galeria-sidebar::-webkit-scrollbar {
    width: 8px;
}
#reglamentoWrapper .reg-galeria-sidebar::-webkit-scrollbar-thumb {
    background: #009FE3;
    border-radius: 8px;
}
#reglamentoWrapper .reg-galeria-sidebar::-webkit-scrollbar-track {
    background: #ddd;
}

/* POP UP UBAM SALUD */

.ubam-salud-popup .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}

.ubam-salud-content {
    position: relative;
    text-align: center;
}

.ubam-salud-img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}

.ubam-salud-close {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #ffffff;
    border-radius: 50%;
    opacity: 1;
    z-index: 10;
}

/*SALUD UBAM*/
.info-links i {
    color: #009FE3;
    transition: transform 0.2s ease, color 0.2s ease;
}

.info-links a:hover i {
    color: #132C45; /* WhatsApp verde */
    transform: scale(1.2);
}





/* ===== GALERÍA NUEVA ===== */
.br-gallery {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 10px;
  scroll-behavior: smooth;
}

.br-gallery::-webkit-scrollbar {
  height: 6px;
}
.br-gallery::-webkit-scrollbar-thumb {
  background: #009FE3;
  border-radius: 10px;
}

.br-card {
  position: relative;
  min-width: 260px;
  height: 360px;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}

.br-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.br-card:hover img {
  transform: scale(1.08);
}

/* Overlay traslúcido */
.br-overlay {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  max-width: 80%;
}

.br-overlay h5 {
  font-size: 1rem;
  margin: 0;
  font-weight: 600;
}

.br-overlay p {
  font-size: .8rem;
  margin: 0;
  opacity: .85;
}