/*
Theme Name: UIF 2025
Theme URI: https://www.uif.gob.sv
Author: Rene A. Martinez
Author URI: https://www.fiscalia.gob.sv/
Description: Sitio web de la Unidad de Investigación Financiera, cuyo objetivo es investigar, proveer información y denunciar el lavado de dinero y el financiamiento del terrorismo.
Tags: Lavado de dinero, Terrorismo, Lavado de activos, financiamiento del terrorismo, venta ilegal de armas.
Version: 2.0
*/
@font-face {
    font-family: 'museo_sans500';
    src: url('fonts/museosans_500-webfont.woff2') format('woff2'),
      url('fonts/museosans_500-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-weight: 500;
  }
  
  @font-face {
    font-family: 'museo_sans900';
    src: url('fonts/museosans_900-webfont.woff2') format('woff2'),
      url('fonts/museosans_900-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-weight: 900;
  }
  
  @font-face {
    font-family: 'museo_sans300';
    src: url('fonts/museosans-300-webfont.woff2') format('woff2'),
      url('fonts/museosans-300-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-weight: 300;
  }

body, html{
    font-family: 'museo_sans300', Helvetica, sans-serif;
}

b, strong{
  font-family: 'museo_sans900', Helvetica, sans-serif;
}

ol{
  list-style-type: decimal!important;
}

ol ol {
  list-style-type: lower-alpha!important;    /* Nivel 2: a, b, c, ... */
  margin-left: 1.5rem;
}

ol ol ol {
  list-style-type: lower-roman!important;    /* Nivel 3: i, ii, iii, ... */
  margin-left: 1.5rem;
}

ul{
  list-style-type: disc!important;
}

ul ul {
  list-style-type: circle!important;
  margin-left: 1.5rem;
}

ul ul ul {
  list-style-type: square!important;
  margin-left: 1.5rem;
}

ol li, ul li{
  font-size: 16px;
  margin-bottom: 15px;
}

.navbar, .navbar-default{
    min-height: 100px!important;
    background-color: #22272a!important;
    border: 0px!important;
    border-radius: 0px!important;
    margin-bottom: 0px;
}

.collapse, .navbar-collapse{
    margin-top: 35px!important;
}

.logo-UIF{
    margin-top: 0px;
    margin-right: 20px;
    height: 70px; /* Ajuste para logo de 70px */
    width: 70px;
}

.navbar-default .navbar-nav > .active > a{
    font-family: 'museo_sans500', Helvetica, sans-serif;
    color: #111!important;
    background: #fff;
    border-radius: 7px;
}
        
/* Estilos adicionales para la solución */
.navbar-nav > li > a {
  font-size: 14px;
    color: white !important;
    padding: 10px 15px;
}

.navbar-nav > li > a:hover {
    color: #ccc !important;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover{
  background: transparent;
  color: #fff;
}

/* Estilo para el botón activo, desplegado o no */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active.open > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:active,
.navbar-default .navbar-nav > .active > a:hover {
  font-family: 'museo_sans500', Helvetica, sans-serif;
  color: #111 !important;
  background-color: #fff !important;
  border-radius: 7px;
  text-decoration: none;
}

.flex-direction-nav{
  list-style-type: none!important;
}

.logo-UIF {
    height: 70px; /* Ajuste para logo de 70px */
    width: 70px;
    margin-top: 7px;
    margin-left: 10px;
}

.site-logo{
  margin-top: 10px;
}

.navbar-form {
    margin-right: 10px;
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
}

.logo-container {
    display: inline-block;
    vertical-align: middle;
}

.custom-right-section {
    display: flex;
    align-items: center;
    margin-top: -20px; /* Compensa el margen superior del navbar-collapse */
}

/* Estilo para el dropdown principal */
.multi-column-dropdown {
  min-width: 500px; /* Aumentamos el ancho para darle más espacio */
  padding: 20px 25px !important;
  background-color: #fff; /* Asegúrate de tener un fondo si es necesario */
  border-radius: 8px; /* Redondeamos las esquinas del contenedor */
}

/* Estilo para las listas dentro de las columnas */
.multi-column-list {
  list-style: none !important;
  padding: 0;
  margin: 0;
}

/* Estilo de los enlaces */
.multi-column-list li a {
  display: block;
  padding: 12px 0; /* Aumentamos el espaciado vertical para mayor "aire" */
  color: #333;
  white-space: nowrap;
  text-decoration: none;
}

/* Estilo del hover de los enlaces */
.multi-column-list li a:hover {
  text-decoration: none;
  background-color: #f5f5f5;
}

/* Estilo de las columnas */
.multi-column-dropdown .col-sm-6 {
  width: 48%; /* Ajustamos el ancho para que las columnas no se toquen */
  padding-right: 20px; /* Espacio entre las columnas */
  box-sizing: border-box; /* Aseguramos que el padding no afecte el ancho total */
}

/* Responsive: en móviles, una sola columna */
@media (max-width: 767px) {
  .multi-column-dropdown {
    width: 100%; /* Ocupa todo el ancho disponible */
    padding: 15px 20px; /* Ajustamos el padding en móviles */
  }

  .multi-column-dropdown .row {
    display: block; /* Apilamos las columnas en móviles */
  }

  .multi-column-dropdown .col-sm-6 {
    width: 100%; /* Las columnas ocupan el 100% del ancho */
    padding-right: 0; /* Quitamos el padding entre columnas */
  }

  .multi-column-list li a {
    color: #fff; /* Color de texto blanco en móviles */
    padding: 15px 0; /* Aumentamos el padding en móviles para mayor espacio */
  }

  .multi-column-list li a:hover {
    color: #000; /* Cambiamos el color en hover para más contraste */
    background-color: #f5f5f5; /* Fondo al hacer hover */
  }
}

.navbar-default .navbar-nav > .active > a.programa-navbar-btn{
  color: #fff!important;
  /*background: #1e68c9!important;*/
  background: linear-gradient(135deg, #022f53, #532786);
  /*background: linear-gradient(135deg, #532786, #022f53);*/
  border: 1px solid #246aa2;
}

ul.servicios-navbar{
  list-style-type: none!important;
}

/**** FELXSLIDER ***/
.heroContainer{
  background: #003b6d;
  padding-top: 70px;
  padding-right: 30px;
  padding-left: 30px;
  overflow-x: hidden;
}

.heroTitle1{
  font-family: 'museo_sans900', sans-serif;
  font-size: 4rem;
  color: #fff;
}

.heroInfoContainer p{
  font-family: 'museo_sans300', Helvetica, sans-serif;
  font-size: 2.5rem;
  color: #fff;
  margin-top: 20px;
}

.heroCta-btn{
  font-size: 2rem;
  color: #fff;
  display: inline-block;
  line-height: 70px;
  padding: 0px 30px;
  background: #071d3c;
  margin-top: 40px;
  border: 2px solid #1451a6;
  border-radius: 7px;
}
.heroTitle1:hover,
.heroCta-btn:hover{
  color:#6da1ea;
  text-decoration: none;
}

.imgHero img{
  border: 14px solid #fff;
}

.shortcutContainer{
  margin-bottom: 100px;
}

.shortcutTitle{
  font-family: 'museo_sans900', Helvetica, sans-serif;
  font-size: 3rem;
  text-align: center;
  display: block;
  margin-top: 77px;
  margin-bottom: 100px;
}

.img-shortcut{
  width: 70px;
  margin-bottom: 20px;;
}

.shortcutLink{
  font-family: 'museo_sans900', Helvetica, sans-serif;
  font-size: 2rem;
  color: #414141;
  display: block;
  margin-bottom: 25px;
  cursor: pointer;
}

.shortcutContainer div p{
  padding: 0px 10px;
}

.alertContainer{
  background: #003b6d;
  padding: 30px;
}

.alertItemContainer{
  background: #fff;
  padding: 30px;
  margin-top: 25px;
  margin-bottom: 25px;
  border-radius: 7px;
}

.alertCategory,
.noticiaCategory{
  padding: 0px;
}

.alertCategory a{
  font-family: 'museo_sans900', Helvetica, sans-serif;
  font-size: 14px;
  color: #fff;
  line-height: 20px;
  display: inline-block;
  background: red;
  padding: 15px 20px;
  border-radius: 30px;
}

.noticiaCategory a{
  font-family: 'museo_sans900', Helvetica, sans-serif;
  font-size: 12.5px;
  color: #000;
  line-height: 20px;
  display: inline-block;
  padding: 15px 20px;
  border-radius: 30px;
  border: 1px solid #000;
}

.alertTitle{
  font-family: 'museo_sans900', Helvetica, sans-serif;
  font-size: 2rem;
}

.metaAlert{
  font-family: 'museo_sans500', Helvetica, sans-serif;
  font-size: 1.4rem!important;
  font-style: italic;
  color: #717171;
  display: block;
  margin-top: 5px;
}

.alertInfo p{
  font-size: 1.6rem;
}

.miscelaneosLink{
  font-family: 'museo_sans500', Helvetica, sans-serif;
  font-family: 1.6rem;
  color: #fff;
  display: inline-block;
  line-height: 35px;
  padding: 0px 15px;
  border-radius: 7px;
  border: 1px solid #fff;
}

.miscelaneosLink:hover{
  color: #fff;
}

.footerContainer{
  padding-top: 35px;
  padding-bottom: 35px;
}

.footer{
  padding-top: 30px;
}

.titleFooter{
  font-family: 'museo_sans900', Helvetica, sans-serif;
  font-size: 2rem;
  display: block;
  margin-bottom: 10px;
}

.footer p{
  display: block;
  margin-bottom: 10px;
}

.footer p:last-child{
  margin-bottom: 0px;
}

/**** page.php ***/
.blue-top-separator{
  height: 35px!important;
  background: #003b6d;
  margin-bottom: 50px;
}

.page-title,
.post-title{
  font-size: 3.5rem;
}

.post-content p,
.page-content p{
  font-size: 16px!important;
  line-height: 2!important;
  margin-bottom: 1.25rem;
}

.post-content h2{
  font-size: 2.5rem;
}

.post-content h3, .search-title{
  font-size: 2rem;
  margin-top: 0px;
}

.post-categories{
  line-height: 2.5rem;
  display: inline-block;
  background: #ebebeb;
  padding: 0px 15px;
}

/***** ACORDEÓN ****/
.panel-default > .panel-heading + .panel-collapse > .panel-body{
  border-top-color: transparent;
}

/* Asegura que la transición se vea más suave */
.panel-collapse {
  overflow: hidden; /* Esto oculta el contenido fuera del área visible */
  transition: height 0.8s ease; /* Transición suave de la altura */
}

.panel-collapse.collapse {
  height: 0; /* Cuando está colapsado, no tiene altura */
}

.panel-collapse.in {
  height: auto; /* Cuando está abierto, tiene la altura automática */
}

.panel-collapse{
  margin-top: 0px!important;
}

.panel-body p{
  font-size: 16px;
  line-height: 21px!important;
}


/**** paginador ****/
/* Paginador principal */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
}

.pagination li {
  display: inline-block;
}

.pagination a,
.pagination span {
  display: inline-block;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.pagination a:hover,
.pagination span:hover {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

.pagination .active a {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
  pointer-events: none; /* Deshabilita clics en la página actual */
}

.pagination .prev,
.pagination .next {
  font-size: 16px;
}

.pagination .prev {
  margin-right: 10px;
}

.pagination .next {
  margin-left: 10px;
}

.pagination .prev:hover,
.pagination .next:hover {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

.pagination .dots {
  font-weight: bold;
}

/* Estilo de los botones de navegación */
.pagination a {
  position: relative;
}

.pagination a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgba(0, 123, 255, 0.1);
  border-radius: 50%;
  transition: all 0.3s ease;
  opacity: 0;
}

.pagination a:hover::before {
  opacity: 1;
}

.pagination .active a::before {
  background-color: rgba(0, 123, 255, 0.3);
  opacity: 1;
}

/**** GUtenberg Table ****/
/* Aumentar padding a las celdas de la tabla */
.wp-block-table table.has-fixed-layout tbody tr td {
  font-size: 16px;
    padding: 20px;  /* Ajusta el valor según lo que necesites */
}

/* Aumentar tamaño del texto del enlace dentro de las celdas */
.wp-block-table table.has-fixed-layout tbody tr td a {
    font-size: 16px;  /* Ajusta el tamaño según lo que necesites */
    padding: 5px;  /* Opcional: agrega algo de espacio alrededor del enlace */
}

/*** VIDEOS ****/
.banner-videos-capacitaciones-section img{
  border-radius: 7px!important;
}
p.videos-link{
  font-family: 'museo_sans900', Helvetica, sans-serif!important;
  font-size: 16px!important;
  text-align: center!important;
  display: block;
  line-height: 21px!important;
  margin-top: 10px;
}

ul.reportes-ul-accordeon{
  list-style-type: none!important;
  padding-left: 0px!important;
}

.counter {
  display: inline-block;
  line-height: 25px;
  background: #ebebeb;
  padding: 0 10px;
  border-radius: 5px;
  font-weight: bold;
  color: #333;
  white-space: nowrap; /* evita que se rompa en varias líneas */
  margin-bottom: 30px;
}

.panel-title{
  font-family: 'museo_sans300', Helvetica, sans-serif!important;
  font-size: 17px!important;
  color: #000!important;
}

ol.letras-list {
    list-style-type: lower-alpha; /* usa letras a, b, c ... */
    padding-left: 20px; /* separa la numeración del texto */
    margin-left: 20px;
}

ol.letras-list li {
    margin-bottom: 5px; /* opcional, espacio entre ítems */
}

ol.letras-list li::marker {
    content: counter(list-item, lower-alpha) ") "; /* agrega el paréntesis */
}

/*** SUJETOS OBIGADOS ***/
.sujetos-row{
  margin-bottom: 30px;
}

.sujetos-item{
  padding: 25px;
  margin-bottom: 70px;
  border-radius: 10px;
  border: 1px solid #ccc;
  transition: background-color ease 0.5s;
}

.sujetos-item:hover{
  background-color: #d7e0e7;
}

.img-sujeto{
  width: 100px!important;
  height: auto!important;
  margin-bottom: 25px;
}

a.sujetos-link{
  font-family: 'museo_sans300', Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 21px;
  display: block;
}

/******* MICROSITE FULL *******/

/** HERO MICROSITE **/
.container-hero-microsite-full{
  max-height: 600px;
  padding-top: 70px;
  padding-bottom: 70px;
  background: 
    url("images/mapa-evento-web-bg.png") no-repeat right center,
    linear-gradient(to top right, #05365a, #3f1430, #000921);
  background-size: auto, cover;
}

/* Tablets */
@media (max-width: 768px) {
  .container-hero-microsite-full {
    /*min-height: 400px!important;*/
    background: 
      url("images/mapa-evento-web-bg.png") no-repeat right bottom,
      linear-gradient(to top right, #05365a, #3f1430, #000921);
    background-size: 40%, cover; /* la imagen ocupa 40% del ancho */
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .container-hero-microsite-full {
    /*min-height: 300px!important;*/
    background: 
      url("images/mapa-evento-web-bg.png") no-repeat right bottom,
      linear-gradient(to top right, #05365a, #3f1430, #000921);
    background-size: 50%, cover; /* se adapta mejor en pantallas chicas */
  }
}

.title-microsite-container{
  margin-bottom: 20px;
}

.title-microsite{
  font-family: 'museo_sans900', Helvetica, sans-serif;
  font-size: 21px;
  color: #fff;
}

.title-hero-microsite{
  font-family: 'museo_sans900', Helvetica, sans-serif;
  font-size: 35px;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
p.excerpt-hero-microsite{
  font-size: 25px;
  font-weight: 700;
  color: #FBB03B;
  display: block;
  margin-top: 10px;
  margin-bottom: 30px;
}

.see-eventos-hero-microsite{
  font-size: 18px;
  font-weight: 700;
  color: #000;
  text-align: center;
  padding: 10px 20px;
  background: #AFCDDD;
  margin-right: 30px;
  border-radius: 7px;
}

.see-material-hero-microsite{
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  background: linear-gradient(135deg, #532786, #022f53);
  margin-right: 30px;
  border-radius: 7px;
  border: 1px solid #246aa2;
}

.see-material-hero-microsite:hover{
  color:#fff;
}

/**** EVENTOS MICROSITIO ****/
.container-micrositio-full{
  background: #f8f8f8;
}
.container-micrositio-news{
  margin-top: 50px;
}

.frase-1-micrositio{
  font-size: 28px;
  text-align: center;
  display: block;
  margin-bottom: 30px;
}

.frase-2-micrositio,
.Frase-2-event-micrositio{
  font-size: 18px;
  text-align: center;
  display: block;
  margin-bottom: 50px;
}

.btns-micrositio-container{
  margin-bottom: 50px;
}

.news-container-micrositio,
.event-micrositio{
  background: #ebebeb;
  padding: 20px;
  margin-bottom: 50px;
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.img-news-micrositio{
  padding-left: 0px;
}

.img-news-micrositio img{
  border-radius: 10px;
}

.latest-news{
  display: block;
  margin-top: 20px;
  margin-bottom: 10px;
}

a.title-news-micrositio{
  font-family: 'museo_sans900', Helvetica, sans-serif;
  font-size: 25px;
  color: #000;
  line-height: normal;
  display: block;
  margin-bottom: 10px;
}

.date-news-micrositio{
  margin-top: 15px;
  margin-bottom: 30px;
}

.container-events-full{
  margin-top: 50px;
  margin-bottom: 100px;
}

.Frase-1-event-micrositio{
  font-size: 28px;
  text-align: center;
  display: block;
  margin-bottom: 10px;
}

.latest-events-2{
  display: block;
  margin-bottom: 10px;
}

.evento-concluido {
    background-color: #6c757d;
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
}

.back-programa{
  font-size: 12px!important;
  display: inline-block;
  line-height: 35px;
  padding: 0px 20px;
  margin-top: 50px;
  background: #ebebeb;
  border-radius: 7px;
  border: 1px solid #ccc;
}

p.excerpt-news-micrositio{
  line-height: 21px!important;
}

.wp-block-gallery{
  margin-bottom: 20px!important;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 767px) {
    .navbar-header {
        height: 100px;
    }
    .collapse, .navbar-collapse {
        margin-top: 0 !important;
    }
    .logo-FGR {
        margin: 10px auto;
        display: block;
        float: none !important;
    }
    .logo-container {
        display: block;
        text-align: center;
        width: 100%;
        margin: 10px 0;
    }
    .custom-right-section {
        margin-top: 0;
        display: block;
    }
    .navbar-form {
        margin: 8px 0;
    }
    .language-selector {
        margin: 10px 0;
        display: inline-block;
    }
    .heroContainer {
    padding: 30px 15px;
    overflow-x: hidden;
  }

  .flexslider .slides > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .heroInfoContainer,
  .imgHero {
    width: 100%;
    padding: 0;
    margin-bottom: 30px;
  }

  .heroTitle1 {
    font-size: 2.8rem; /* Reducido desde 5.5rem */
    line-height: 1.2;
  }

  .heroInfoContainer p {
    font-size: 1.8rem; /* Reducido desde 2.5rem */
    line-height: 1.4;
  }

  .heroCta-btn {
    font-size: 1.6rem;
    line-height: 50px;
    padding: 0 20px;
    margin-top: 25px;
  }

  .imgHero img {
    width: 100%;
    height: auto;
    border: 8px solid #fff;
  }
}