input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=url]:focus {
    background-color: #fff;
    border-color: var(--primary-color);
	border: 1px solid var(--primary-color);
}

.container-filter-up select:focus{
	border: 1px solid var(--primary-color);
}


.item-detalle p span {
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}

.pagination button:disabled, .pagination span button:disabled{
background-color:#231F20  !important;
    cursor: not-allowed;
    
}

.pagination button, .pagination span button {
    width: auto;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
  padding: 5px 15px;!important}

.container-general {
  display: flex;
  gap: 40px;
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
}
.container-filter-up {
  display: flex;
  gap: 30px;
  width: 100%;
  justify-content: end;
  max-width: 1300px;
  margin: 0 auto 36px;
  padding: 0 20px;
}
.container-search {
  display: flex;
  gap: 20px;
  width: -webkit-fill-available;
  justify-content: end;
  align-items: center;
}
.container-search input {
  display: flex;
  max-width: 530px;
  max-height: 50px;
  padding: 10px 20px;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: var(--GRIS-CLARO, #F4F5F4);
  border: none;
  border-radius: 0;
}
.container-search button {
  border-radius: 10px;
  background: var(--rojo, #F03A4A);
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  min-width: 185px;
  border: none;
  height: 100%;
  max-height: 50px;
  transition: all ease .3s;
}
.container-search button:hover {
  transform: scale(1.02);
}
.container-filter-up select {
  background: var(--GRIS-CLARO, #F4F5F4);
  border: none;
  color: var(--negro-50, rgba(35, 31, 32, 0.50));
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
  padding: 10px 20px;
  display: block;
  width: 100%;
  max-width: 290px;
}
.container-search input::placeholder {
  color: var(--negro-50, rgba(35, 31, 32, 0.50));
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
}
.container-filtros {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.checkbox-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.filtro-label {
  color: var(--GRIS-CLARO, #F4F5F4);
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  background: var(--NEGRO, #231F20);
  display: flex;
  width: 292px;
  padding: 10px 30px;
  gap: 10px;
  margin: 0;
  position: relative;
  cursor: pointer;
}
.filtro-label::after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="9" viewBox="0 0 17 9" fill="none"><path d="M8.97535 8.43876L15.9447 1.1242C16.0611 1.00216 16.126 0.840007 16.126 0.67139C16.126 0.502771 16.0611 0.340625 15.9447 0.218578L15.9369 0.210702C15.8804 0.151331 15.8126 0.104055 15.7373 0.0717497C15.6621 0.0394449 15.581 0.0227851 15.4991 0.0227851C15.4172 0.0227851 15.3362 0.0394449 15.261 0.0717496C15.1857 0.104055 15.1178 0.151331 15.0614 0.210702L8.49891 7.0987L1.93904 0.210701C1.88264 0.15133 1.81475 0.104054 1.7395 0.0717484C1.66425 0.0394437 1.58321 0.0227839 1.50132 0.0227839C1.41943 0.0227839 1.33839 0.0394436 1.26315 0.0717484C1.1879 0.104054 1.12 0.15133 1.0636 0.210701L1.05573 0.218577C0.93938 0.340623 0.874476 0.50277 0.874476 0.671388C0.874476 0.840006 0.93938 1.00215 1.05573 1.1242L8.0251 8.43876C8.08639 8.50309 8.16011 8.55431 8.24178 8.5893C8.32345 8.62429 8.41137 8.64233 8.50023 8.64233C8.58908 8.64233 8.677 8.62429 8.75868 8.5893C8.84035 8.55431 8.91406 8.50309 8.97535 8.43876Z" fill="white"/></svg>');
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s;
  color: #fff;
}
.checkbox-container.collapsed .filtro-label::after {
  transform: translateY(-50%) rotate(-90deg);
}

.checkbox-container.expanded > label {
  display: flex;
}
.checkbox-container.collapsed > label {
  display: none;
}
.checkbox-container label {
  display: flex;
  gap: 11px;
  align-items: center;
  cursor: pointer;
}
p.filtro-name {
  max-width: 258px;
  margin: 0;
}
input[type="checkbox"] {
  -webkit-appearance: none; /* Para ocultar el checkbox predeterminado en navegadores Webkit */
  -moz-appearance: none; /* Para ocultar el checkbox predeterminado en navegadores Mozilla */
  appearance: none; /* Para ocultar el checkbox predeterminado en navegadores compatibles con el estándar */
  width: 16px;
  height: 16px;
  border: 2px solid #000;
  border-radius: 0%; /* Hacer el checkbox redondeado */
  position: relative;
  cursor: pointer;
}

input[type="checkbox"]:checked::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background-color: #000; /* Color del checkmark */
  border-radius: 50%; /* Hacer el checkmark redondeado */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
input[type="checkbox"]:checked + .filtro-name {
  font-weight: 700;
  color: #000;
}

.container-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.row-item {
  display: flex;
  flex-direction: column;
  max-width: 292px;
  transition: all ease .3s;
}
.row-item:hover {
  transform: scale(1.02);
}
.item-img {
  display: flex;
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 162px;
  min-width: 291px;
}
.item-img img{
  width: 100%;
  max-height: 162px; 
  object-fit: cover;
}
.item-img-modalidad {
  position: absolute;
  top: 16px;
  right: 0;
  background: var(--rojo, #F03A4A);
  color: var(--GRIS-CLARO, #F4F5F4);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding: 5px 15px;
  width: fit-content;
}

.container-item-area-destacada {
  padding: 10px;
  min-height: 50px;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-area-destacada {
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
  max-width: 210px;
  margin: 0 auto;
}
.marke {
  background: #F54546;
}
.finan {
  background: #F0784A;
}
.innov {
  background: #FF9E00;
}
.estra {
  background: #913C86;
}
.perso {
  background: #446CB3;
}
.opera {
  background: #1BB4FD;
}
.gesti {
  background: #39CCBE;
}
.container-programa {
  min-height:90px;
    justify-content: center;
    display: flex;
    align-items: center;
}
.item-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--GRIS-CLARO, #F4F5F4);
  padding: 20px 30px; 
}
.item-programa {
  color: var(--AZUL-MARINO, #0D0B70);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}
.item-valor {
  color: var(--rojo, #F03A4A);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 10px 0 10px;
  font-family: 'Inter', sans-serif;
}
.item-valor span {
  color: var(--negro-50, rgba(35, 31, 32, 0.50));
  text-decoration: line-through;
	font-family: 'Inter', sans-serif;
}
.item-validez {
  color: var(--NEGRO, #231F20);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0 0 5px;
  font-family: 'Inter', sans-serif;
}
.item-detalle{
  display: flex;
  gap: 10px;
  align-items: center;
}
.item-detalle p {
  color: var(--NEGRO, #231F20);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  font-family: 'Inter', sans-serif;
}
.item-detalle p span {
  font-weight: 400;
}
.item-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
}
.item-btn {
  border-radius: 10px;
  background: var(--rojo, #F03A4A);
  display: flex;
  width: fit-content;
  height: 40px;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 8px 15px;
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  transition: all ease .3s;
  margin: 0;
}
.item-btn {
  transform: scale(1.02);
  transition: all ease .3s;
}
.item-btn:hover {
  color: #fff;
}
.pagination { 
  display: flex;
  gap: 10px;
  margin: 60px auto;
  justify-content: center;
}
.pagination button {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid #000;
  cursor: pointer;
  transition: all ease .3s;
}
.pagination button:hover {
  background:#000;
  color: #fff;
}
.pagination button.active {
	background-color: #007bff !important;
	color: #fff;
	border-color: #007bff;
}

@media screen and (max-width: 800px) {
  .container-rows {
    justify-content: center;
  }
  .container-general {
    flex-direction: column;
  }
  .container-filtros {
    align-items: center;
    gap: 14px; 
  }
  .checkbox-container.collapsed > label {
    display: flex;
  }
  .checkbox-container.expanded > label {
    display: none;
  }
  .container-filter-up {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(100% - 40px;)
  }
  .container-search {
    flex-direction: column;
    gap: 12px;
  }
  .checkbox-container {
    width: 100%;
  }
  .container-search input {
    width: calc(100% - 40px);
    max-width: none;
  }
  .container-search button {
    padding: 10px;
    width: calc(100% - 40px);
  }
  .container-filter-up select {
    width: calc(100% - 40px);
    max-width: none;
  }
  .filtro-label {
    width: 100%;
  }
  
}

@media screen and (max-width: 600px){
  .row-item {
    max-width: none;
  }
}