/******************BOTON SUBIR********************/

.boton-subir{
  display: none;
  background: #007bff  ;
  border: thin solid #fff;
  border-radius: 3px;
  position: fixed;
  right: 5px;
  bottom:5px;
  z-index: 999999999;
}
/*evento hover*/
.boton-subir:hover{
  box-shadow:   0px 2px 10px 0px rgba(255, 255, 255, 0.75);
  background: #1471B8;
}
/*estilos para el tag i*/
.boton-subir i{
  color: #fff;
  font-size: 1.5em;
  padding: 10px 10px 10px 10px;
  -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  transform: rotate(0deg);
}

/******************BOTON ACCESIBILIDAD********************/

.boton-accesibilidad{
  background: #92D050  ;
  border: thin solid #fff;
  border-radius: 3px;
  position: fixed;
  right: 20px;
  top:100px;
  z-index: 999999999;
}
/*evento hover*/
.boton-accesibilidad:hover{
  box-shadow:   0px 2px 10px 0px rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transform: scale(1.2);;
}
/*estilos para el tag i*/
.boton-accesibilidad i{
  color: white;
  font-size: 2em;
  padding: 10px 10px 10px 10px;
  -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  transform: rotate(0deg);
}

/******************BOTON WHATSAPP********************/

.boton-whatsapp{
  background: #00BB2D  ;
  position: fixed;
  right: 0px;
  top:250px;
  z-index: 999999999;
}
/*evento hover*/
.boton-whatsapp:hover{
  background: #1471B8;
  cursor: pointer;
}
/*estilos para el tag i*/
.boton-whatsapp i{
  color: #fff;
  font-size: 2em;
  padding: 10px 10px 10px 10px;
  -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  transform: rotate(0deg);
}

/******************BOTON FACEBOOK********************/

.boton-facebook{
  background: #0074EF  ;
  position: fixed;
  right: 0px;
  top:300px;
  padding-left: 5px;
  padding-right: 5px;
  z-index: 999999999;
}
/*evento hover*/
.boton-facebook:hover{
  background: #1471B8;
  cursor: pointer;
}
/*estilos para el tag i*/
.boton-facebook i{
  color: #fff;
  font-size: 1.9em;
  padding: 10px 10px 10px 10px;
  -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  transform: rotate(0deg);
}

/******************BOTON INSTAGRAM********************/

.boton-instagram{
  background: #CA1CBD  ;
  position: fixed;
  right: 0px;
  top:348px;
  padding-left: 1px;
  padding-right: 1px;
  z-index: 999999999;
}
/*evento hover*/
.boton-instagram:hover{
  background: #1471B8;
  cursor: pointer;
}
/*estilos para el tag i*/
.boton-instagram i{
  color: #fff;
  font-size: 1.8em;
  padding: 10px 10px 10px 10px;
  -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  transform: rotate(0deg);
}

/******************BOTON YOUTUBE********************/

.boton-youtube{
  background: #ED0000;
  position: fixed;
  right: 0px;
  top:395px;
  z-index: 999999999;
}
/*evento hover*/
.boton-youtube:hover{
  background: #1471B8;
  cursor: pointer;
}
/*estilos para el tag i*/
.boton-youtube i{
  color: #fff;
  font-size: 1.55em;
  padding: 10px 10px 10px 10px;
  -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  transform: rotate(0deg);
}

/****************MENU ACCESIBILIDAD***********/
div.div_accesibilidad {
  background-color: #2B93D6;
  width: 110px;
  height: 110px;
  overflow: auto;
  border-radius: 10px;
  color: white;
}

#div_accesibilidad {
 position: fixed;
        top:40vh;
        bottom: 1px;
        left: 75%;
        right: 0px;
    box-shadow: 0px 0px 2px 2px #1471B8;
  background-color: rgba(0, 0, 0, 1.0);
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 25%;
  height: 75vh;
  z-index:9999999999999999999999999999999999;

}

@media screen and (max-width:1300px){
  #div_accesibilidad {
position: fixed;
        top:30vh;
        bottom: 1px;
        left: 55%;
        right: 0px;
    box-shadow: 0px 0px 2px 2px #1471B8;
  background-color: rgba(0, 0, 0, 1.0);
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 45%;
  height: 75vh;
  z-index:9999999999999999999999999999999999;
  }
}

@media screen and (max-width:970px){
#div_accesibilidad {
  position: fixed;
  top:2.5vh;
        bottom: 0%;
        left: 5%;
        right: 0px;
  box-shadow: 0px 0px 2px 2px #1471B8;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 90%;
  height: 95vh;
  z-index:9999999999999999999999999999999999;
  }
}

/**/

/****************DIV BUSCAR REPORTE***********/
div.div_reporte {
  background-color: #2B93D6;
  width: 110px;
  height: 110px;
  overflow: auto;
  border-radius: 10px;
  color: white;
}

#div_reporte {
 position: fixed;
        top:60vh;
        bottom: 1px;
        left: 75%;
        right: 0px;
    box-shadow: 0px 0px 2px 2px #1471B8;
  background-color: #1471B8;
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 25%;
  height: 75vh;
  z-index:99999999999999999999999;

}

@media screen and (max-width:900px){
  #div_reporte {
position: fixed;
        top:50vh;
        bottom: 1px;
        left: 0%;
        right: 0px;
    box-shadow: 0px 0px 2px 2px #1471B8;
  background-color: #1471B8;
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 100%;
  height: 50vh;
  z-index:99999999999999999999999;
  }
}

@media screen and (max-width:790px){
  #div_reporte {
position: fixed;
        top:50vh;
        bottom: 1px;
        left: 0%;
        right: 0px;
    box-shadow: 0px 0px 2px 2px #1471B8;
  background-color: #1471B8;
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 100%;
  height: 50vh;
  z-index:99999999999999999999999;
  }
}

/**/

/****************MENU TRANSPARENCIA***********/
div.div_transparencia {
  background-color: #2B93D6;
  width: 110px;
  height: 110px;
  overflow: auto;
  border-radius: 10px;
}

#div_transparencia {
 position: fixed;
        top:2vh;
        bottom: 0px;
        left: 5%;
        right: 0px;
    box-shadow: 0px 0px 2px 2px #1471B8;
  background-color: rgba(255, 255, 255, 1.0);
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 90%;
  height: 96vh;
  z-index:9999999999999999999999999999999999;

}

#div_transparencia_fondo {
 position: fixed;
 top:0vh;
        bottom: 0%;
        left: 0%;
        right: 0px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 100%;
  height: 100vh;
  z-index: 999999;
}

@media screen and (max-width:1300px){
  #div_transparencia {
position: fixed;
        top:30vh;
        bottom: 1px;
        left: 55%;
        right: 0px;
    box-shadow: 0px 0px 2px 2px #1471B8;
  background-color: rgba(255, 255, 255, 1.0);
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 45%;
  height: 75vh;
  z-index:9999999999999999999999999999999999;
  }
}

@media screen and (max-width:970px){
#div_transparencia {
  position: fixed;
  top:2.5vh;
        bottom: 0%;
        left: 5%;
        right: 0px;
  box-shadow: 0px 0px 2px 2px #1471B8;
  background-color: rgba(255, 255, 255, 1.0);
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 90%;
  height: 95vh;
  z-index:9999999999999999999999999999999999;
  }
}

/**/

/****************MENU TRANSPARENCIA***********/
div.div_noticia {
  background-color: #2B93D6;
  width: 110px;
  height: 110px;
  overflow: auto;
  border-radius: 10px;
}

#div_noticia {
 position: fixed;
        top:5vh;
        bottom: 0px;
        left: 10%;
        right: 0px;
    box-shadow: 0px 0px 2px 2px #1471B8;
  background-color: rgba(255, 255, 255, 1.0);
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 80%;
  height: 90vh;
  z-index:9999999999999999999999999999999999;

}

#div_noticia_fondo {
 position: fixed;
 top:0vh;
        bottom: 0%;
        left: 0%;
        right: 0px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 100%;
  height: 100vh;
  z-index: 9999999999999;
}

@media screen and (max-width:1300px){
  #div_noticia {
position: fixed;
        top:30vh;
        bottom: 1px;
        left: 55%;
        right: 0px;
    box-shadow: 0px 0px 2px 2px #1471B8;
  background-color: rgba(255, 255, 255, 1.0);
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 45%;
  height: 75vh;
  z-index:9999999999999999999999999999999999;
  }
}

@media screen and (max-width:970px){
#div_noticia {
  position: fixed;
  top:2.5vh;
        bottom: 0%;
        left: 5%;
        right: 0px;
  box-shadow: 0px 0px 2px 2px #1471B8;
  background-color: rgba(255, 255, 255, 1.0);
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 90%;
  height: 95vh;
  z-index:9999999999999999999999999999999999;
  }
}

/**/

.headerfiltro{
  width: 100%;
  background-color: #1471B8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 99;
  cursor: pointer;
  font-size: 24px;
  margin-bottom: 30px;
}

.headerfiltro i{
font-size: 20px;
}

@media screen and (max-width:870px){
.headerfiltro a{
font-size: 20px;
}
.headerfiltro i{
font-size: 20px;
}
}

/***fieldset**/
fieldset.scheduler-border {
    border: 5px groove #007BFF !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
    border-radius: 10px;
    margin-bottom: 40px;
    background-color: black;

}

fieldset.scheduler-border-claro {
    border: 5px groove #007BFF !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
    border-radius: 10px;
    margin-bottom: 40px;
    background-color: white;
    color: black;

}

fieldset.scheduler-border:hover {
    border: 5px groove green !important;
    font-weight: bold;
    cursor: pointer;
}

.class_texto_leer{
  border: 3px solid yellow;
}

.boton_claro {
    border: 5px groove green !important;
    font-weight: bold;
    cursor: pointer;
    background-color: green;
}

.boton_oscuro {
    border: 5px groove green !important;
    font-weight: bold;
    cursor: pointer;
    background-color: black;
}

.organismo_principal{
  transition: all; 
  background-color: rgb(255, 255, 255) !important; 
  border-color: rgb(0, 0, 0) !important; 
  color: rgb(0, 0, 0) !important;
}

.organismo_principal_title{
  transition: all; 
  background-color: rgb(255, 255, 255) !important; 
  border-color: rgb(0, 0, 0) !important; 
  color: #1C75B5 !important;
}

.cuadro_img{
  transition: 0.5s;
  background-color: rgb(255, 255, 255) !important; 
  border-color: rgb(0, 0, 0) !important; 
  color: rgb(0, 0, 0) !important;
}

.redes_sociales{
  transition: 0.3s; 
  background-color: rgb(255, 255, 255) !important; 
  border-color: rgb(0, 0, 0) !important; 
  color: black !important;
}

.color_menu_claro{
  min-height: 100px !important; 
  height: 100px; 
  background: white;
}

.color_menu_oscuro{
  min-height: 100px !important; 
  height: 100px; 
  background: linear-gradient(to bottom, black) !important;
}

.recibo-pago{
  width: 100px;
  height: 100px;
}

.btnGen{
    font-size: 18px;
    font-weight: bold;
    width: 100%;
    height: 45px;
    margin-top: 10px;
    cursor: pointer;
    border: 1px solid #BC955C;
    background: #fff;
    padding: 5px 2px;
    color: #BC955C;
    border-radius: 10px;
}

.btnGen:hover{
  background: #1C75B5;
  color: white;
}

.pad{
  padding-left: 200px;
  padding-right: 200px;
}

@media screen and (max-width:950px){
.pad{
  padding-left: 20px;
  padding-right: 20px;
}
}

.button-55 {
  align-self: center;
  background-color: #1471B8;
  background-image: none;
  background-position: 0 90%;
  background-repeat: repeat no-repeat;
  background-size: 4px 3px;
  border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
  border-style: solid;
  border-width: 2px;
  box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-family: Neucha, sans-serif;
  font-size: 1rem;
  line-height: 23px;
  outline: none;
  padding: .75rem;
  text-decoration: none;
  transition: all 235ms ease-in-out;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
  position: center;
}

.button-55:hover {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
  transform: translate3d(0, 2px, 0);
}

.button-55:focus {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
}

.button {
  text-decoration: none;
  line-height: 1;
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative;
  box-shadow: 10px 10px 20px rgba(0,0,0,.05);
  background-color: #fff;
  color: #121212;
  border: none;
  cursor: pointer;
}

.button-decor {
  position: absolute;
  inset: 0;
  background-color: var(--clr);
  transform: translateX(-100%);
  transition: transform .3s;
  z-index: 0;
}

.button-content {
  display: flex;
  align-items: center;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.button__icon {
  width: 48px;
  height: 40px;
  background-color: var(--clr);
  display: grid;
  place-items: center;
}

.button__text {
  display: inline-block;
  transition: color .2s;
  padding: 2px 1.5rem 2px;
  padding-left: .75rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
}

.button:hover .button__text {
  color: #fff;
}

.button:hover .button-decor {
  transform: translate(0);
}

/****************mapa de proceso***********/
div.divproceso {
  background-color: #2B93D6;
  width: 110px;
  height: 110px;
  overflow: auto;
  border-radius: 10px;
}

#divproceso {
 position: fixed;
 top:5%;
        bottom: 0%;
        left: 5%;
        right: 0px;
    box-shadow: 0px 0px 2px 2px #008BFF;
  background-color: rgba(255, 255, 255, 1.0);
  color:#000;
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 90%;
  height: 90%;
        
  z-index: 999;

}

#divprocesofondo {
 position: fixed;
 top:0%;
        bottom: 0%;
        left: 0%;
        right: 0px;
  background-color: rgba(0, 0, 0, 0.7);
  color:#000;
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 100%;
  height: 100%;
        
  z-index: 999;
}


@media screen and (max-width:870px){
#divproceso {
  position: fixed;
  top:5%;
        bottom: 0%;
        left: 5%;
        right: 0px;
  box-shadow: 0px 0px 2px 2px #008BFF;
  background-color: rgba(255, 255, 255, 1.0);
  color:#000;
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 90%;
  height: 90%;
  z-index: 9;
  }
}


.hr1 {
   background: #a502ee;
   background: linear-gradient(to right, #642D44, #ffffff, #000000);
   height: 3px;
   opacity: .90;
}

.archivos_trimestre {
   color: black;
}

.archivos_trimestre:hover {
   color: #642D44;
   font-weight: bold;
}

/************parpadeo de INFO***********/
.parpadea {
  
  animation-name: parpadeo;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 10s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
  50% { opacity: 0.5; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.5; }
   100% { opacity: 1.0; }
}

@keyframes parpadeo {  
  0% {  opacity: 1.0;
        transform: scale(1.0); }
   50% { opacity: 0.7;
        transform: scale(1.1); }
  100% { opacity: 1.0;
         transform: scale(1.1); }
}

/*******CONTENEDOR1*********************/
.contenedor1{
  background-image: url(../img/agua.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media screen and (max-width:870px){
.contenedor1{
  background-image: url(../img/agua_mobile.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  }
}

/*************BOTON BUSCAR***********/

div.divs {
  overflow: auto;
}

#divs {
 position: fixed;
 top:0%;
 bottom: 0%;
 left: 0%;
 right: 0px;
 background-color: #1471B8;
 color:#000;
 padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 100%;
  height: 100%;
  z-index:1980;

}

@media screen and (max-width:870px){
#divs {
  position: fixed;
  top:0%;
  bottom: 0%;
  left: 0%;
  right: 0px;
  background-color: #1471B8;
  color:#000;
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 100%;
  height: 100%;
  z-index:1980;
  }
}

.resultado{
    color: white;
    font-size: 18px;
    margin-top: .625rem;
    min-height: auto;
    font-family: "Montserrat", "Roboto", "Times New Roman", serif;
    font-weight: 700;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 20px;
}

#loading_soft {
  position: absolute;
   margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  position:fixed;
  z-index: 9999999;

  width: 70px;
  height: 70px;
  border: 10px solid black;
  border-top: 10px solid #007BFF;
  border-radius: 50%;
  animation-name: girar;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.zum{
  zoom: 100%;
}

@media screen and (max-width:1200px){
  .zum{
    zoom: 100%;
  }
}

@media screen and (max-width:800px){
  .zum{
    zoom: 100%;
  }
}

.hr-dos-colores {
  border: none;
  height: 4px;
  background: linear-gradient(to right, white, white);
  border-radius: 4px;
}

.map-wrapper {
      position: relative;
      width: 100%;
      height: 500px;
      overflow: hidden;
      border-radius: 8px;
    }

    .map-wrapper iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }

    .map-overlay {
      position: absolute;
      top: 0;
      right: 0;
      width: 25%;
      height: 40%;
      z-index: 2;
      cursor: pointer;
    }

    .tlapi_index{
      width: 50%; height: 100%;
    }

    @media screen and (max-width:1200px){
      .tlapi_index{
      width: 100%; height: 100%;
    }
  }

  @media screen and (max-width:992px){
      .tlapi_index{
      width: 300px; height: 470px;
    }
  }

  .visible{
    display: block;
  }

  .non-visible{
    display: none;
  }
  .ciapacov-audio {
    position: relative;
    max-width: 750px;
    margin: 50px auto;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #0f4c81, #1471B8);
    color: white;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    font-family: 'Segoe UI', sans-serif;
}

/* CONTENEDOR DE ONDAS */
.wave-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 120px;
    overflow: hidden;
}

.wave {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    background-size: 50% 100%;
    opacity: 0.4;
}

/* OLA 1 */
.wave1 {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0V46.29c47.29,22,104.37,29.05,158,17.39C230,48,284,6,339,1.34S448,32,502,53.31s108,42.33,163,40,109-32,163-53.34S936,3,990,16s108,48,163,53.31V0Z' fill='%2300D4FF'/%3E%3C/svg%3E");
    animation: waveMove 8s linear infinite;
}

/* OLA 2 */
.wave2 {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0V15.81C47.29,40,104.37,57,158,50.81C230,43,284,6,339,1.34S448,32,502,53.31s108,42.33,163,40,109-32,163-53.34S936,3,990,16s108,48,163,53.31V0Z' fill='%2393328E'/%3E%3C/svg%3E");
    animation: waveMoveReverse 12s linear infinite;
    opacity: 0.3;
}

/* OLA 3 */
.wave3 {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0V46.29c47.29,22,104.37,29.05,158,17.39C230,48,284,6,339,1.34S448,32,502,53.31s108,42.33,163,40,109-32,163-53.34S936,3,990,16s108,48,163,53.31V0Z' fill='%23ffffff'/%3E%3C/svg%3E");
    animation: waveMove 18s linear infinite;
    opacity: 0.2;
}

/* ANIMACIONES */
@keyframes waveMove {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes waveMoveReverse {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

/* CONTENIDO */
.player-content {
    position: relative;
    padding: 40px;
    z-index: 2;
}

.player-content h4 {
    margin: 0;
    font-weight: 600;
}

.player-content h5 {
    font-size: 14px;
    margin-bottom: 20px;
    opacity: 0.9;
    color: white;
}

/* CONTROLES */
.controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.controls button {
    background: #93328E;
    border: none;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
}

.controls button:hover {
    background: #b744b3;
    transform: scale(1.1);
}

.progress {
    flex: 1;
    height: 6px;
    border-radius: 4px;
    appearance: none;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
}

.progress::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #00D4FF;
}

.time {
    font-size: 13px;
}

.headerfiltro {
      margin-bottom: 20px;
      padding: 10px 15px;
      display: flex;
      justify-content: flex-end;
      border-radius: 6px 6px 0 0;
  }

  .btn-cerrar-ciapacov {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #ffffff;
      color: #0a2a43;
      border: 2px solid #0a2a43;
      padding: 6px 14px;
      border-radius: 25px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .btn-cerrar-ciapacov i {
      font-size: 16px;
  }

  .btn-cerrar-ciapacov:hover {
      background: #d10000;
      color: #ffffff;
      border-color: #d10000;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .hr-ciapacov {
    border: none;
    height: 3px;
    width: 100%;
    background: linear-gradient(
        90deg,
        #0a2a43 0%,
        #0f4c75 50%,
        #0a2a43 100%
    );
    margin: 30px 0;
    border-radius: 3px;
}
.slider{
    width:100%;
    height:60vh;
    overflow:hidden;
}

.slides{
    display:flex;
    height:100%;
    animation: slider 12s infinite;
}

.slide{
    min-width:100%;
    display:flex;
    flex-direction:column;
}

.slide img{
    width:100%;
    height:95%;
    object-fit:contain;
    align-items:center;
}

.descripcion{
    position:absolute;
    bottom: 1px;
    width: 100%;
    height:8%;
    text-align:center;
    font-size:18px;
    font-weight:600;
    padding:10px;
    background: white;
    font-family:'Poppins', sans-serif;
}

/* animación */
@keyframes slider{

    0%{transform:translateX(0);}
    28%{transform:translateX(0);}

    33%{transform:translateX(-100%);}
    61%{transform:translateX(-100%);}

    66%{transform:translateX(-200%);}
    94%{transform:translateX(-200%);}

    100%{transform:translateX(0);}
}

.tabla-ciapacov{
    width:80%;
    border-collapse:collapse;
    font-family:Arial, Helvetica, sans-serif;
    background:#ffffff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

/* encabezado */
.tabla-ciapacov th{
    background:linear-gradient(180deg,#0077b6,#0096c7);
    color:#fff;
    padding:14px;
    text-align:left;
    font-size:15px;
}

/* filas */
.tabla-ciapacov td{
    padding:12px;
    border-bottom:1px solid #e6eef5;
    font-size:14px;
}

/* hover */
.tabla-ciapacov tr:hover{
    background:#f1f8ff;
}

/* iconos */
.icono{
    color:#0077b6;
    margin-right:6px;
}

/* ubicación */
.tabla-ciapacov .ubicacion a{
    font-size:20px;
    color:#0096c7;
    transition:0.2s;
}

.tabla-ciapacov .ubicacion a:hover{
    color:#023e8a;
}

/* lugar */
.lugar{
    font-weight:bold;
    color:#023e8a;
    margin:0;
}

.organigrama-container{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    text-align:center;
}

.organigrama-container:hover{
  transform: scale(1.5); /* Amplía la imagen al 120% */
}

.organigrama-container img{
    max-width:1300px;
    width:1300px;
    height:auto;
}

/* En pantallas grandes */
@media (min-width:1200px){

    .organigrama-container img{
        width:100%;
        max-width:1200px;
    }

}

/* Contenedor adaptable */
.card-n {
  position: relative;
  width: 100%;
  max-width: 400px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Imagen */
.card-n img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Overlay oscuro */
.overlay-n {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.3) 50%,
    rgba(0,0,0,0.8) 100%
  );
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* Texto */
.contenido-n {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 18px;
  color: white;
  z-index: 2;
  transform: translateY(10px);
  transition: transform 0.3s ease;
}

.fecha-n {
  font-size: 13px;
  opacity: 0.85;
  display: block;
  margin-bottom: 6px;
  position: left;
}

.contenido-n h2 {
  font-size: 18px;
  margin: 0;
  line-height: 1.3;
}

/* ✨ HOVER EFECTOS */
.card-n:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0,0,0,0.25);
}

.card-n:hover img {
  transform: scale(1.1);
}

.card-n:hover .overlay {
  opacity: 0.9;
}

.card-n:hover .contenido {
  transform: translateY(0);
}

/* 📱 Responsive */
@media (max-width: 768px) {
  .card-n img {
    height: 220px;
  }

  .contenido-n h2 {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .card-n img {
    height: 200px;
  }

  .contenido-n {
    padding: 14px;
  }

  .contenido-n h2 {
    font-size: 15px;
  }

  .fecha-n {
    font-size: 12px;
  }
}

/*mensaje noticias vacias*/
.mensaje-vacio {
  max-width: 500px;
  margin: 70px auto;
  padding: 30px 20px;
  background: #ffffff;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border: 1px solid #eee;
  animation: fadeIn 0.4s ease;
}

/* Icono */
.mensaje-vacio .icono {
  font-size: 40px;
  color: #007BFF;
  margin-bottom: 15px;
}

/* Título */
.mensaje-vacio h3 {
  font-size: 20px;
  color: #222;
  margin-bottom: 8px;
}

/* Texto */
.mensaje-vacio p {
  font-size: 14px;
  color: #666;
}

/* Animación */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*cards noticias*/
.card-noticia {
  max-width: 800px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

.imagen-n {
  width: 100%;
  aspect-ratio: 4/3; /* 🔥 MISMO tamaño para todas */
  overflow: hidden;
  position: relative;
}

.imagen-n img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 🔥 recorta sin deformar */
}

/* Sombra oscura arriba */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.7),
    rgba(0,0,0,0.3),
    transparent
  );
  z-index: 1;
}

/* Texto encima */
.contenido-n {
  position: absolute;
  bottom: 1px;
  left: 0;
  padding: 20px;
  color: white;
  z-index: 2;
}

.contenido-n .fecha {
  font-size: 14px;
  opacity: 0.9;
  position: left;
}

.contenido-n h2 {
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.3;
}

/* Hover efecto */
.card-noticia:hover img {
  transform: scale(1.05);
}

.card-noticia:hover .overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 70%);
}

/* Responsive */
@media (max-width: 600px) {
  .contenido-n h2 {
    font-size: 18px;
  }

  .contenido-n {
    padding: 15px;
  }
}

.detalle {
  padding: 18px;
  background: #fff;
}

.detalle p {
  font-size: 17px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 12px;
  font-family: 'Georgia', serif;
}

.corto {
  padding: 18px;
  background: #fff;
}

.corto p {
  font-size: 20px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 12px;
  font-family: 'Georgia', serif;
  font-weight: bold;
}

/*buscador de noticias*/
 .buscador {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
  padding: 15px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);

  margin: 20px auto;   /* 🔥 lo centra */
  max-width: 900px;    /* 🔥 evita que se estire demasiado */
  justify-content: center; /* 🔥 centra los elementos internos */
}

.campo {
  position: relative;
}

select,
input {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
  outline: none;
  font-size: 14px;
  transition: all 0.3s ease;
  min-width: 140px;
}

/* Input con icono */
.input-icono input {
  padding-right: 35px;
}

.icono {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
}

/* Focus elegante */
select:focus,
input:focus {
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.15);
}

/* Botones */
.btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s ease;
}

/* Buscar */
.buscar {
  background: #007BFF;
  color: white;
}

.buscar:hover {
  background: #0056b3;
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 600px) {
  .buscador {
    flex-direction: column;
    align-items: stretch;
  }

  select,
  input,
  .btn {
    width: 100%;
  }
}


/****************************JUEGO*****************************/
#canvas {
    width: 100% !important;
    max-width: 95%;   /* 👈 aquí decides el tamaño */
    height: auto;
    display: block;
    margin: 0 auto;     /* 👈 lo centra */

    position: relative !important;
}

#canvas:focus {
  outline: none;
}

#status, #status-splash, #status-progress {
  position: absolute;
  left: 0;
  right: 0;
}

#status, #status-splash {
  top: 0;
  bottom: 0;
}

#status {
  background-color: #000000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

#status-splash {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
}

#status-splash.show-image--false {
  display: none;
}

#status-splash.fullsize--true {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

#status-splash.use-filter--false {
  image-rendering: pixelated;
}

#status-progress, #status-notice {
  display: none;
}

#status-progress {
  bottom: 10%;
  width: 50%;
  margin: 0 auto;
}

#status-notice {
  background-color: #5b3943;
  border-radius: 0.5rem;
  border: 1px solid #9b3943;
  color: #e0e0e0;
  font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
  line-height: 1.3;
  margin: 0 2rem;
  overflow: hidden;
  padding: 1rem;
  text-align: center;
  z-index: 1;
}

/*PANTALLA COMPLETA*/
#game-container {
    position: relative;
}

#fullscreen-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;

    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}

/* 🔥 cuando esté en pantalla completa */
#game-container:fullscreen {
    width: 100vw;
    height: 100vh;
}

#game-container:fullscreen canvas {
    width: 100%;
    height: 100%;
}

.card-waves{
  position:relative;
  width:100%;
  height:25px;
  overflow:hidden;
  margin-top:10px;
}

.card-waves svg{
  width:100%;
  height:100%;
}

/* Animación más suave */
.wavex use{
  animation: waveFlow 10s ease-in-out infinite;
}

.w1 use{ animation-duration:10s; }
.w2 use{ animation-duration:14s; }
.w3 use{ animation-duration:18s; }

/* Movimiento más natural */
@keyframes waveFlow{
  0%{ transform:translateX(-90px) translateY(0px); }
  50%{ transform:translateX(0px) translateY(5px); }
  100%{ transform:translateX(85px) translateY(0px); }
}