.filtros-container {
display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 30px;
    background-color: var(--ColorWhite);
    border-radius: 20px;
    align-items: center;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

}

/*
display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  background: #fff;
  padding: 20px 25px;
  border-radius: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
  box-shadow: 0 4px 9.4px -4px rgba(158, 158, 158, 0.29);

*/

/*
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 30px;
    background-color: var(--ColorWhite);
    border-radius: 20px;
    align-items: center;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
*/


.filtros-container h2 {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.container-select {
  display: flex;
  gap: 15px;
  align-items: center;
  width: 70%;
  justify-content: end;

  /*flex-wrap: wrap;*/
}
.container-select select {
  /*padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  outline: none;
  min-width: 120px;*/
  border-radius: 10px;
    padding: 10px;
    border: 1px solid var(--border-light);
    outline: none;
    color: var(--Colorparrafo);


     /* Quita la flecha nativa */
            appearance: none;
            -webkit-appearance: none;

            /* Agrega tu propia flecha con SVG */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center; /* ajusta la posición */
            background-size: 20px;
            cursor: pointer;
}
/*.btn-filtro {
  background-color: var(--colorCeleste);
    color: var(--ColorWhite);
    border: none;
    width: 150px;
    height: 37px;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    padding: 5px 0px;
}

.btn-filtro:hover {
  background-color: #2a9de0;
}*/
/* Primer select (más chico) */
.container-select select:first-child {
  width: 30%;
}

/* Segundo select (más grande) */
.container-select select:nth-child(2) {
  width: 45%;
}

.container-flex-cart-departament {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center; /* centra horizontal */
  align-items: center;     /* centra vertical */
  width: 100%;
  margin-top: 60px;
}

.departament {
  width: calc((100% - 20px) / 2); /* 2 columnas + 1 gap */
  min-width: 320px;
  background-color: var(--ColorWhite);
  border-radius: 15px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 15px;
  border: 3px solid var(--colorCeleste);

  gap: 15px;

 cursor: pointer;
  transition: transform .2s ease;
}

.departament:hover {
  transform: scale(1.008);
}



.departament h2{
  font-size: 18px;
  color: var(--AzulFuerte);
  font-weight: 700;
}



/*AQUI EMPIEZA JUNTA DIRECTIVA */
    .container-tex-zonas .title-zonas{
        color: var(--colorCeleste);
    }
    .border-buttom-Light{
        border-bottom: 1px solid var(--Light-plomo);
        padding-bottom: 10px;
    }
    .flex-container-directiva{
        display: flex;
        justify-content: space-between;
        gap: 20px;
        margin-top: 60px;
    }

    .container-zonas{
        width: 75%;
    }
    .container-tex-zonas{
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .container-zonas-establecidad{
        display: flex;
        justify-content: flex-start;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 30px;
    }
    .norte {
     width: calc(33.333% - 13.33px); /* 3 elementos por fila */
     min-width: 180px;
    border: 2px solid var(--colorCeleste);
    border-radius: 8px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.norte h3{
    color: var(--AzulFuerte);
    font-weight: 700;
}

    .btn-zonas a {

        width: 100%;
        text-align: center;
        padding: 12px 0;
        background-color: var(--colorCeleste);
        color: var(--ColorWhite);
        text-decoration: none;
        border-radius: 8px;
        display: inline-block;
        font-size: 12px;
        transition: all ease .3s;
        cursor: pointer;
        font-weight: 700;
    }
    .btn-zonas a:hover{
        background-color: var(--celesteborde);
    }


    /* CONTENEDOR GENERAL */
.sidebarP{
    width: 20%;
   /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/
    /*border-top-left-radius: 20px;
    border-top-right-radius: 20px;*/
    border-radius: 20px;
    border: 2px solid #FFFFFF;

}

/* ------------------------------ */
/* BUSCAR */
/* ------------------------------ */
.buscador-searh  {
    background-color: #f9f9f9;
    padding: 20px 20px;
}
.buscador-searh h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--Color-text);
}


.categoria-header i{
    display: none;
}

.search-buscador {

    border-radius: 6px;
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.search-buscador input {
    border: none;
    outline: none;
    width: 100%;
    padding: 10px;
    font-size: 14px;
    color: var( --blanco-opacity);
    opacity: 0.6;

}

.search-buscador button {
    position: absolute;
    right: 12px;
    width: 30px;
    height: 30px;
    background: #0B63B3;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    color: white;
}

/* ------------------------------ */
/* CATEGORÍAS */
/* ------------------------------ */

/*.categoria-box {
    margin-top: 25px;
    background: #f9f9f9;
    border-radius: 8px;

}*/
.categoria-box{
     border-top-left-radius: 20px;
    border-top-right-radius: 20px;

   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   border: 1px solid var(--borderForm);
}
.categoria-header {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: var(--AzulSwipper);
    padding:20px 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    color: var(--ColorWhite);
   /* padding-top: 15px;*/ /*si no queda lo borramos*/
}

.categoria-header h3 {
    font-size: 18px;
      color: var(--ColorWhite);
    font-weight: 500;
    text-transform: uppercase;

}

.arrow-main {
    display: none; /* solo mobile */
    transition: .3s;
}

/* Lista */
/*.categoria-list {
   /* margin-top: 15px;*/
   /* padding: 0px 20px;
}*/

.categoria-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-transform: uppercase;
    font-size: 16px;
    color: var(--black-bold);
    cursor: pointer;

    padding: 20px ;
     border-left: 4px solid transparent; /* importante para transición suave */
    transition: background-color 0.3s ease, color 0.3s ease, border-left-color 0.3s ease;
    background-color: var(--ColorWhite);
    border-bottom: 1px solid var(--colorCeleste);

}

/* Selecciona la última .categoria-row dentro de .categoria-list */
.categoria-list .categoria-row:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.categoria-row i{
    color: var(--color-celeste);
}
/*.categoria-row:hover{
    color: var(--colorCeleste);
}*/
.categoria-row span{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--ColorWhite);
    font-size: 13px;
}

.categoria-row.active {
    color: var(--ColorWhite);
    background-color: var(--colorCeleste);
    border-left: 4px solid var(--celesteborde);
    /*font-weight: 700;*/
}
.categoria-row:hover{
    color: var(--ColorWhite);
    background-color: var(--colorCeleste);
    border-left: 4px solid var(--celesteborde);
}

/* ------------------------------ */
/* SUBMENÚ */
/* ------------------------------ */

.submenu-padre {
    position: relative;
    padding-right: 30px;
}

.arrow-sub {
    position: absolute;
    right: 0;
    top: 14px;
    transition: .3s;
    font-size: 12px;
}

.submenu-list {
    display: none;
    padding-left: 10px;
    margin-top: 10px;
}

.submenu-list a {
    display: block;
    padding: 6px 0;
    color: var(--plomo-oscuro);
    text-decoration: none;
}

.submenu-padre.open .submenu-list {
    display: block;
}

.submenu-padre.open .arrow-sub {
    transform: rotate(90deg);
}


/*INDEX: CUERPO-ECLEASIATICO*/
.container-cuerpo-eclesiastico{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.container-img-cuerpo-eclesiastico{
  width: 100%;
  display: flex;
  justify-content: center;
}
.container-img-cuerpo-eclesiastico img{
  width: 100%; max-width: 500px;
}

.zona-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    color: var(--AzulSwipper);
    font-weight: 700;
    font-size: 18px;
}

.zona-item i {
    font-size: 10px;
    color: var(--colorCeleste);
}

.btn-biblico .max-padding{
  padding: 10px 20px;
}

/*FIN*/




/*INDEX : FRONTERAS VIVAS*/

      .flex-container-fronteras-vivas{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 50px;
      }

      .fronteras-vivas {
  width: calc((100% - 40px) / 3); /* 3 columnas = 2 gaps */
  min-width: 300px;

  background-color: var(--ColorWhite);
  border-radius: 15px;
  padding: 20px;

  display: flex;
  flex-direction: column;
  ;
  text-align: center;
  box-sizing: border-box;
}
.container-img-fronteras-vivas  {
  width: 100%;
  height: auto;
  border-radius: 10px;

}

.container-img-fronteras-vivas img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}


.container-enlaces-frontera{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.fronteras-vivas h2{
  color: var(--AzulSwipper);
  text-align: start;
  padding: 15px 0px;
  font-size: 18px;
  font-weight: 500;
}

.container-enlaces-frontera a{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}


.container-enlaces-frontera a:nth-child(1){
  flex: 0.5;
  background-color: #0b3c91;
    transition: transform .16s ease, background-color .18s ease;

}


.container-enlaces-frontera a:nth-child(2){
  flex: 0.6;
  background-color: var(--colorCeleste);
  transition: transform .16s ease, background-color .18s ease;

}

.container-enlaces-frontera a:nth-child(3){
  flex: 1.6;
  background-color: var(--gray-oscuro);
  transition: transform .16s ease, background-color .18s ease;

}

.container-enlaces-frontera a:nth-child(1):hover{
  background-color: var(--AzulSwipper);
  transform: translateY(-0.8px);
  filter: brightness(1.05);
}
.container-enlaces-frontera a:nth-child(2):hover{
  background-color: var(--celesteOscuro);
  transform: translateY(-0.8px);
  filter: brightness(1.08);
}
.container-enlaces-frontera a:nth-child(3):hover{
  background-color: var(--black-bold);
  transform: translateY(-0.8px);
  filter: brightness(1.05);
}




/*FIN FRONTERSA VIVAS/


/*INDEX EVENTO 3 */
.container-evento-3{
    justify-content: flex-start;
}
.container-evento-3 a:nth-child(1){
    flex: 0.0;
}

.container-evento-3 a:nth-child(2){
    flex: 0.0;
}
.container-evento-3 a:nth-child(3){
    flex: 0.0;
}

.flex-reverse{
    flex-direction: row-reverse;
    margin-top: 40px;
}


/* FIN EVENTO 3*/

/*EVENTO - 4.HTML*/

.accordion-wrapper {
            width: 100%;
            margin-top: 50px;
            display: flex;
            flex-direction: column;
                gap: 14px;
                align-items: center;
            }

            /* ---- Item ---- */
            .accordion-item {
                width: 100%;
                max-width: 600px;
            border-radius: 10px;
            overflow: hidden;
            border: 1.5px solid var(--borderForm);
            background: #fff;

            opacity: 0.94;
            }

            /* ---- Cabecera ---- */
            .accordion-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 24px;
            cursor: pointer;
            user-select: none;
            transition: background .25s;
            background: #fff;
            }

            .accordion-header span {
            font-size: 16px;
            font-weight: 700;
            color: var(--gray-oscuro);
            letter-spacing: .3px;
            text-transform: uppercase;
            }

            .accordion-icon {
            width: 30px; height: 30px;
            border-radius: 50%;
            color: var(--acordion-color);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            transition: transform .3s, background .25s;
            }
            .accordion-icon i {
            width: 14px; height: 14px;
            stroke: #0077CC;
            fill: none;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: stroke .25s;
            }

            /* Estado activo de la cabecera */
            .accordion-item.active .accordion-header {
            background: var(--acordion-color);
            }
            .accordion-item.active .accordion-header span {
            color: #fff;
            }
            .accordion-item.active .accordion-icon {
            color : var(--ColorWhite);
            transform: rotate(180deg);
            }
            .accordion-item.active .accordion-icon i {
            stroke: #fff;
            }

            /* ---- Cuerpo ---- */
            .accordion-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height .4s ease, padding .3s ease;
            }
            .accordion-item.active .accordion-body {
            max-height: 600px;
            }

            .accordion-body-inner {
            overflow-y:auto;
            }

            /* ---- Tabla ---- */
            table {
            width: 100%;
            border-collapse: collapse;
            background-color:var(--ColorWhite);
            }

            thead tr {
            border-bottom: 2px solid #e2edf7;
            background-color:#caedfb;
            padding:8px;
            }

            th {
            text-align: left;
            font-size: 13px;
            font-weight:700;
            color: var(--black-bold);
            letter-spacing: .5px;
            text-transform: uppercase;
            padding: 12px 10px;
            }

            td {
            padding: 4px;
            font-size: 14.5px;
            color: var(--texto-oscuro);
            border-bottom: 1px solid #f0f7fc;
            font-weight: 400;
            padding:8px;
            }

            tbody tr:last-child td { border-bottom: none; }

           /* tbody tr:hover td { background: #f7fbff; }*/

            td:last-child, th:last-child {
            text-align: right;
            }

            .container-evento-4{
                justify-content: center;
                margin: 20px 0px;
            }

            /* Responsive */
            @media (max-width: 600px) {
            .accordion-header span { font-size: 13px; }
            th, td { font-size: 12.5px; padding: 9px 6px; }
            }
/*FIN EVENTO 4*/

/* ------------------------------ */
/* RESPONSIVE — MENOS DE 900 PX */
/* ------------------------------ */

@media (max-width:1080px ) {
 .sidebarP{
    width: 26%;
 }
}

@media (max-width: 900px) {
    .categoria-header i{
        display: block;
    }
    .sidebarP {
        width: 100%;
    }

    .categoria-header{
        justify-content: space-between;
        padding: 20px;
    }

    .arrow-main {
        display: block;
    }

    .categoria-list {
        overflow: hidden;
        transition: max-height .3s ease;
    }

    .categoria-box.open .categoria-list {
        max-height: 500px;
       overflow-y: auto;   /* scroll solo vertical */
        overflow-x: hidden; /* evita scroll horizontal */
    }

    .categoria-box.open .arrow-main {
        transform: rotate(180deg);
    }

    /*
    .flex-container-conectores{
        flex-direction: column;
        gap: 30px;
    }
    .flex-container-productos{
        width: 100%;
    }
    .container-flex-productos{
        flex-direction: column;
        gap: 30px;
    }*/
    .flex-container-directiva{
        flex-direction: column;
        gap: 30px;
    }
    .container-zonas{
        width: 100%;
    }
    .flex-container-directiva{
        margin-top: 50px;
    }

    .container-tex-zonas{
        align-items: center;
    }
}


/* Botón */
@media (max-width:800px ) {
 .filtros-container{
  flex-direction: column;
 }
 .container-select{
  width: 100%;
 }
}

@media (max-width: 600px) {
 .padding-top-cero{
    padding-top: 0px; /*COLOCAMOS ESTO POR QUE CUANDO LLEGABA A 600PX PARA ABAJO TENIA MUCHO ESPACIO PADDING-TOP */
 }

 .container-select{
  flex-direction: column;
 }
 .container-select select:first-child {
  width: 100%;
}

/* Segundo select (más grande) */
.container-select select:nth-child(2) {
  width: 100%;
}
}

@media (max-width: 620px) {
  .norte {
    width: calc(50% - 10px); /* 2 por fila */
  }
}

@media (max-width:500px ) {
 .fronteras-vivas{
  width: 100%;
 }
}

@media (max-width:460px ) {
 .norte{
    width: 100%;
 }
 .departament{
    min-width: 280px;
 }
}
/**/











/*control estasitica - 2 html*/
/*
.filtros-container {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  background: #fff;
  padding: 20px 25px;
  border-radius: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
  box-shadow: 0 4px 9.4px -4px rgba(158, 158, 158, 0.29);

}



.filtros-container h2 {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.container-select {
  display: flex;
  gap: 15px;
  align-items: center;
  width: 70%;
  justify-content: end;


}
.container-select select {

  border-radius: 10px;
    padding: 10px;
    border: 1px solid var(--border-light);
    outline: none;
    color: var(--Colorparrafo);
}

.container-select select:first-child {
  width: 30%;
}


.container-select select:nth-child(2) {
  width: 45%;
}

.container-flex-cart-departament {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 60px;
}

.departament {
  width: calc((100% - 20px) / 2);
  min-width: 320px;
  background-color: var(--ColorWhite);
  border-radius: 15px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 15px;
  border: 3px solid var(--colorCeleste);

  gap: 15px;

 cursor: pointer;
  transition: transform .2s ease;
}

.departament:hover {
  transform: scale(1.008);
}



.departament h2{
  font-size: 18px;
  color: var(--AzulFuerte);
  font-weight: 700;
}



@media (max-width:800px ) {
 .filtros-container{
  flex-direction: column;
 }
 .container-select{
  width: 100%;
 }
}

@media (max-width:600px ) {
 .container-select{
  flex-direction: column;
 }
 .container-select select:first-child {
  width: 100%;
}


.container-select select:nth-child(2) {
  width: 100%;
}
}
*/