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);
}
.row-item.noname {
    display: none !important;
}
.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;
  height: 100%;
  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;
  flex-grow: 1; /* obliga a esta caja a rellenar el espacio hasta el final */
  gap: 5px;
  background: var(--GRIS-CLARO, #F4F5F4);
  padding: 20px 30px; 
}
.item-programa {
  color: var(--AZUL-MARINO, #0D0B70);
  font-size: 17px;
  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;
  margin-top: auto; /* Al poner auto, el margen empuja todo el contenido hacia arriba y fija los botones abajo */
}
.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;
  }
}


/*** MENU DE TIPOS DE PROGRAMAS NUEVO ***/

.programa-link{
  display:block;
  padding: 0;
  color:#231F20;
  text-decoration:none;
  font-size:16px;
}

.programa-link:hover{
  text-decoration:underline;
}

.programa-link.activo{
  font-weight:700;
  color:#0034D9/*#F03A4A (rojo)*/;
}