/*************************************
   General
**************************************/


/**************************************
  Buscador
****************************************/
.filter-block h3{
  margin-bottom: 10px;
}
.filter-block p {
  margin-bottom: 10px;
}
input[type=text].form-control,
input[type=password].form-control {
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

section.search-block .form__wrap{
    background-color: #F9F8F4;
    padding: 40px 30px;
    padding-left: 450px;
    background-repeat: no-repeat;
    background-position: left top;
    background-image: url(../img/buscador.webp);
}

#buscador_miembro {
  background-image: url(../img/busqueda_miembros.webp);
  background-size: auto 100%;
}
#buscador_auditor {
  background-image: url(../img/busqueda_auditores_independientes.webp);
  background-size: auto 100%;
}
#buscador_sociedad {
  background-image: url(../img/busqueda_sociedades.webp);
  background-size: auto 100%;
}
#buscador_contador {
  background-image: url(../img/buscas-un-contador.webp);
  background-size: auto 100%;
}


section.search-block .button{
  padding: 5px 65px; border-radius: 14px;
}

.results-block .estado-I { color:#9c0a0a; }
.results-block a { color: #444; }

section.filter-block  ul.buscador__letras { list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; }
ul.buscador__letras a{
  display: block; width: 22px; height: 22px; color: #FFF; text-align: center; border-radius: 5px; background-color: var(--color-guinda); font-size: 15px; line-height: 1em; padding-top: 4px;
}
ul.buscador__letras a:hover{ background-color: #000; }


section.results-block ul{
  list-style: none; padding: 0; margin: 0;
}
section.results-block ul li{
  padding-top: 5px; padding-bottom: 5px; border-bottom: 1px solid #AAA; display:flex; justify-content: space-between;
}
section.results-block ul li a{ display:block; width:65%; }
section.results-block ul li span.estado{ display:block; width:25%; }
section.results-block ul li span.estado-inhabil { color:#FF0000; }

.results-block table th,
.item__detalles table th,
.buscador__datos table th { background-color: #999; color: #FFF; width: 20%; text-align: left; }

.buscador__perfil { max-width: 750px; padding-top: 40px; padding-bottom: 40px; }
.buscador__avatar img { width: 70%; }

.custpage__title {
  background-color: var(--color-guinda); color: #FFF;
}
.custpage__breadcrumb { color: #FFF; padding-top: 0px; padding-bottom: 8px; border-bottom: 1px solid #FFF; font-size: 15px; }
.custpage__breadcrumb a { color:#DA8080; }
.custpage__breadcrumb a:hover { color:#FFF; }
.custpage__title h1{  text-align: center; font-size: 35px; color: #FFF; padding-top: 15px; padding-bottom: 60px; line-height: 1em; }


.listado__nombre { width: 35%; }

.resultados-block table.table { width: 100%; }
.resultados-block table.table th { text-align: left; background-color: #999; color: #FFF;  }
.resultados-block ul { list-style: none; margin-left: 0; margin-bottom: 20px; }
.resultados-block ul li{ margin-bottom: 30px; }
.resultados-block h4 { background-color: #edf4f7; font-size: 18px; margin-bottom: 5px; padding: 5px 10px; }
.resultados-block h5 { color: var(--color-guinda); font-size: 16px; margin-top: 20px; margin-bottom: 10px; }



/**************************************
  General
****************************************/
.mb-1 {  margin-bottom: .25rem !important; }  
.mb-2 {  margin-bottom: .5rem !important; }  
.mb-3 {  margin-bottom: 1rem !important; }  
.mb-4 {  margin-bottom: 2rem !important; }  
.mb-5 {  margin-bottom: 4rem !important; }  

.pb-1 {  padding-bottom: .25rem !important; }  
.pb-2 {  padding-bottom: .5rem !important; }  
.pb-3 {  padding-bottom: 1rem !important; }  
.pb-4 {  padding-bottom: 2rem !important; }  
.pb-5 {  padding-bottom: 4rem !important; }  

.mt-1 {  margin-top: .25rem !important; }  
.mt-2 {  margin-top: .5rem !important; }  
.mt-3 {  margin-top: 1rem !important; }  
.mt-4 {  margin-top: 2rem !important; }  
.mt-5 {  margin-top: 4rem !important; }  

.ml-1 {  margin-left: .25rem !important; }  
.ml-2 {  margin-left: .5rem !important; }  
.ml-3 {  margin-left: 1rem !important; }  
.ml-4 {  margin-left: 2rem !important; }  
.ml-5 {  margin-left: 4rem !important; }  

.pt-1 {  padding-top: .25rem !important; }  
.pt-2 {  padding-top: .5rem !important; }  
.pt-3 {  padding-top: 1rem !important; }  
.pt-4 {  padding-top: 2rem !important; }  
.pt-5 {  padding-top: 4rem !important; }  


/*********************************************
  Cursos
**********************************************/
#eventos__categories ul{
  list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; margin-bottom: 10px;
}
#eventos__categories ul li a{ display: block; border-radius: 5px; border: 1px solid #999; padding: 0 14px; color:#000; }
#eventos__categories ul li a:hover,
#eventos__categories ul li a.activo{ background-color: var(--color-guinda); color: #FFF; border: 1px solid var(--color-guinda); }

.flex { display: flex; }
.flex-1 { flex: 1; }

#perfil__foto {
  width: 120px; height: 160px; background-repeat: no-repeat; background-position: center top; background-size: 90%; background-image: url(../img/avatar-default.svg); border: 1px solid #999; text-align: center; color:#FF0000; line-height: 1.3em;
}

.row-cursos {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 30px 30px; 
  padding-top: 10px;
  padding-bottom: 40px;
}

.row-cursos .evento{ 
  box-shadow: 0 10px 50px 0 rgba(26, 46, 85, .1);
  border-radius: 10px;
  overflow: hidden;
  transition: all .3s ease-in-out;
  background-color: #FFF;
}
.row-cursos .evento:hover{ 
  transform: scale(1.03);
  box-shadow: 0 10px 50px 0 rgba(26, 46, 85, .3);
}

ul.curso__meta {
  list-style: none; margin: 0; padding: 0; font-size: 14px; margin-bottom: 15px;
}


.curso__thumbnail {
  height: 220px; overflow: hidden; background-color: #EEE; position: relative;
}
.curso__thumbnail a{
  display: flex; height: 100%;
}
.curso__thumbnail img{
  display: block; object-fit: fill; width: 100%;
}

.curso__thumbnail .curso__gratis {
  color:#FFF; background-color: #45d98a; border-radius: 3px; display: block; padding: 4px 8px; position: absolute; left:10px; top:10px;
}

.curso__tipo {
    background-color: var(--color-guinda-claro);
    border-radius: 3px;
    color: var(--color-guinda); 
    display: inline-block;    
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 15px;
    padding: 1px 10px;
}

.curso__contenido {
  padding: 30px; background-color: #FFF; border-radius: 0 0 4px 4px;
}
.curso__contenido h4{
  font-size: 18px; font-weight: 700;
}
.curso__contenido h4 a{
  color: #333;
}
.curso__contenido h4 a:hover{ color: var(--color-guinda); }



/*******************************************
  Curso Detalle
*********************************************/
.curso__detalles {
  background-color: var(--color-lightgrey); color: #333; margin-bottom: 15px; padding: 25px 30px; font-size: 15px;
}
.curso__detalles h2{ color: #333; }
.curso__detalles ul { list-style: none; margin: 0; padding: 0; }
.curso__detalles ul li { margin-bottom: 5px; }
.curso__detalles a { color: var(--color-guinda); }
.curso__detalles a:hover { color: #FFF; opacity: .5; }
.curso__detalles .curso__meta { list-style: none; }
.curso__detalles .curso__meta svg{ width: 25px; height: 25px; filter: brightness(.5); }
.curso__detalles .curso__meta li{ display: flex; gap: 5px; }


.curso__wrap {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  grid-template-rows: 1fr;
  gap: 0px 40px;
  grid-auto-flow: row;
  padding-left: 15px;
  padding-right: 15px;
}

.tab__nav { margin-bottom: 20px; }
.tab__nav ul { 
  list-style: none; margin: 0; display: flex; border-bottom: 1px solid #e5e5e5;  justify-content: center;
}

.tab__nav ul li a{     
  color: grey;    
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
  padding: 15px 25px;
  position: relative;
  display: block;
}
.tab__nav ul li a:hover, .tab__nav ul li a.activo{   
  color: var(--color-guinda);
}


.tab__tabs .tab {
  
}

.tab__tabs .tab .tab__cont { display: none; padding-bottom: 50px;  } 
.tab__tabs .tab.activo .tab__cont {  display: block; }

.fade {
  transition: opacity .15s linear;
}
.fade:not(.activo) {
  opacity: 0;
}


/***************************************************
  Acordeones
*****************************************************/
.faq-accordion {

}
.faq-accordion .accordion-item {
  border-radius: 10px;
  box-shadow: 0 10px 50px 0 rgba(26, 46, 85, .1);
  margin-bottom: 30px;
  background-color: #FFF;  
}
.faq-accordion h5.accordion-header {
  margin: 0; padding: 12px 45px 12px 25px;  border-radius: 10px 10px 0 0; font-size: 18px; font-weight: 600; background-color: #FFF; color: #333; position: relative; cursor: pointer;
}
.faq-accordion h5.accordion-header::after {
  content: '▼'; font-size: 12px; color: var(--color-guinda); position: absolute; right: 30px;  top: 15px; transition: .3s; 
}
.accordion-item.is-open h5.accordion-header::after {
  transform: rotate(180deg);
}

.faq-accordion .accordion-body {
  padding: 0; transition: all .3s ease; overflow: hidden; max-height: 0; 
}
.accordion-item.is-open .accordion-body {
  max-height: 1500px;  padding: 15px 20px; transition: all .3s ease;
}



#evento__like img { display: inline-block; width: 25px; height: 25px; filter: brightness(0.5); }
#evento__like.activo { opacity: .5; }

.evento-expositor { display: flex; gap: 30px; }
.evento-expositor .expositor_thumb { width: 22%; flex: 0 0 auto; }
.evento-expositor .expositor_thumb img {
  border-radius: 50%; object-fit: cover; object-position: 25% 25%;
    width: 150px; height: 150px;
}

.compartir__row { display: flex; gap: 20px; }
a.curso__copylink { display: inline-flex; color: #333; gap: 10px; align-items: center;  }
a.curso__copylink img { width: 24px; height: auto; opacity: .7; }


/******** Sidebar ***************/
.curso__right {
  padding: 20px; background-color: #FFF; border-radius: 15px; margin-top: -60px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.075); font-size: 15px;
}
.curso__right ul {
  list-style: none; padding: 0; margin: 0;
}
.curso__right ul li{ display: flex; gap: 10px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #e5e5e5; }
.curso__right ul svg{ width: 25px; height: 25px; filter: brightness(.6); }

.curso__right ul li span.label { display: flex; gap: 5px; }


body.home .cursos__data {
  display: none;
}


/*********************************************
  Oportunidades de Empleo
**********************************************/
.row-empleos, .row-noticias {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 30px 30px; 
  padding-top: 10px;
  padding-bottom: 40px;
}

.row-empleos .empleo, 
.row-noticias .noticia,
.row-actividades .actividad {
  box-shadow: 0 10px 50px 0 rgba(26, 46, 85, .1);
  border-radius: 10px;
  overflow: hidden;
  transition: all .3s ease-in-out;
  background-color: #FFF;
}

.row-noticias .noticia:hover, .row-actividades .actividad:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 50px 0 rgba(26, 46, 85, .3);
}

.empleo__thumbnail,
.noticia__thumbnail {
  height: 250px; overflow: hidden; background-color: #EEE; margin-bottom: 15px;
}
.empleo__thumbnail a,
.noticia__thumbnail a{
  display: flex; height: 100%;
}
.empleo__thumbnail img,
.noticia__thumbnail img{
  display: block; object-fit: fill; width: 100%;
}
.empleo__contenido {
  padding: 10px 25px;
}
.empleo__contenido h4,
.noticia__contenido h4{
  font-size: 18px; font-weight: 700; text-align: center; padding-left: 10px; padding-right: 10px;
}
.empleo__contenido h4 a,
.noticia__contenido h4 a{
  color: #333;
}
.noticia__contenido h4 a:hover{
  color: var(--color-guinda);
}


/*************************************************
  Actividades
*************************************************/
.row-actividades {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 30px 30px; 
  padding-top: 10px;
  padding-bottom: 40px;
}  
.actividad__contenido { 
    padding: 15px 30px;
    background-color: #FFF;
    border-radius: 0 0 4px 4px;
}
.actividad__contenido h4 {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}
.actividad__contenido h4 a:hover {
  color: #000;
}
.actividad__thumbnail {
    height: 530px;
    overflow: hidden;
    background-color: #EEE;
    position: relative;
}
.actividad__thumbnail img {
    display: block;
    object-fit: fill;
    width: 100%;
}
.actividad__thumbnail .actividad__fecha {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(238, 74, 98, .15);
    border-radius: 3px;
    color: #ee4a62;
    display: inline-block;
    font-size: 13px;
    font-weight: 500;    
    padding: 1px 10px;
}
.rojo { color:#9C2E49; }
.rojo2 { color:var(--color-guinda); }

/**********************************************
  Flex Grids
************************************************/  
.flex-grid {
  display: flex;
  gap: 1rem;
}

.flex-grid .col {
  flex: 1;
}

/* Nueva clase para 1/3 - 2/3 */
.flex-grid-thirds {
  display: flex;
  gap: 1rem;
}

.flex-grid .col-1-3 {
  flex: 1;
}

.flex-grid .col-2-3 {
  flex: 2;
}

/* Responsive: una columna sobre otra en pantallas pequeñas */
@media (max-width: 400px) {
  .flex-grid,
  .flex-grid-thirds {
    flex-direction: column;
  }

  .flex-grid .col,
  .flex-grid-thirds .col-1-3,
  .flex-grid-thirds .col-2-3 {
    width: 100%;
    margin-bottom: 10px;
  }


  section.search-block .form__wrap{ 
    padding-left: 30px; padding-top: 220px; background-size: 100% auto !important;
  }
}