/* ============================= */
/* FILTROS ACORDEONES */
/* ============================= */

.acordeones-filtro__form{
  margin-bottom: 30px;
}

/* fila de filtros */
.acordeones-filtro__row{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
}

/* campos */
.acordeones-filtro__field{
  font-family: var(--font-primary);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* labels */
.acordeones-filtro__field label{
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--color-secundario-700);
  font-size: 14px;
}

/* select */
.acordeones-filtro__select{
  font-family: var(--font-primary);
  color: var(--color-secundario-400);
  width: 280px;
  padding: 8px 40px 8px 14px;
  border: 1px solid var(--color-secundario-300);
  border-radius: 4px;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: #fff;

  /* icono */
  background-image: none;
  position: relative;
}

.acordeones-filtro__select option[value="1"],
.acordeones-filtro__select option[value="2"],
.acordeones-filtro__select option[value="3"]{
  color: var(--color-secundario-700);
}


/* icono personalizado */
.acordeones-filtro__field{
  position: relative;
}

.acordeones-filtro__select:focus,
.acordeones-filtro__select:focus-visible{

  border-color: var(--color-secundario-700);

  outline: 2px solid var(--color-principal-500);
  outline-offset: 2px;

  box-shadow: 0 0 0 3px rgba(78,89,119,.20);
}
select:invalid{
  color:#9AA3B2;
}

/* cuando el usuario selecciona algo */
.acordeones-filtro__select:valid{
  color: var(--color-secundario-700);
}

.acordeones-filtro__field::after{
  content: "";
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 16px;
  height: 16px;

  background-color: var(--color-secundario-700); /* controla el color */

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  pointer-events: none;
}

/* input */
.acordeones-filtro__input{
  font-family: var(--font-primary);
  width: 220px;
  padding: 8px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* botones */
.acordeones-filtro__actions{
  font-family: var(--font-primary);
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

/* botón principal */

.acordeones-filtro__btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--btn-height);
  padding:0 1rem;
  border:none;
  border-radius:var(--btn-radius);
  font-family:inherit;
  font-weight: var(--fw-regular);
  cursor:pointer;
  text-align:center;
  white-space:nowrap;
  transition:
    background-color .2s ease,
    transform .1s ease;
}


/* buscar */
.acordeones-filtro__btn--primary{
  width: var(--btn-width-sm);
  background: var(--color-principal-500);
  color: white;
}
.acordeones-filtro__btn--primary:hover {
    background: var(--color-principal-700);
}

.acordeones-filtro__btn--primary:active {
    background: var(--color-principal-900);
    transform: scale(0.97);
}

.acordeones-filtro__btn--primary:focus-visible {
    outline: 3px solid var(--color-principal-300);
    outline-offset: 2px;
}

.acordeones-filtro__btn--primary:disabled, .acordeones-filtro__btn--primary[aria-disabled="true"] {
    background: var(--color-secundario-300);
    color: var(--color-secundario-700);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 1;
}

/* limpiar */
.acordeones-filtro__btn--ghost{
  width: var(--btn-width-md);
  background: var(--color-blanco);
  color: var(--color-principal-500);
  border: 1px solid var(--color-principal-500);
}
.acordeones-filtro__btn--ghost:hover {
    color: var(--color-blanco);
    background: var(--color-principal-500);
}
.acordeones-filtro__btn--ghost:active {
    background: var(--color-principal-900);
    transform: scale(0.97);
}
/* ============================= */
/* ESTILOS COMPONENTE ACORDEON */
/* ============================= */

.acordeones-filtro .ac-accordion__item{
    border: 1px solid var(--color-secundario-300);
    border-radius: 0px;
    margin: 0;
}

.acordeones-filtro .ac-accordion__item .ac-accordion__title{
    font-size: clamp(1rem, 0.9167rem + 0.1736vw, 1.125rem);
    line-height: clamp(1.2rem, 1.1rem + 0.2083vw, 1.35rem);
    font-weight: var(--fw-extrabold);
}

.acordeones-filtro .ac-accordion__item .ac-accordion__chev{
  content: "";
  width: 16px;
  height: 16px;

  background-color: var(--color-secundario-900); /* controla el color */

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  pointer-events: none;  
}

.acordeones-filtro .ac-accordion__chev{
  transition: transform .25s ease, background-color .25s ease;
}

/* rotación cuando abre */
.acordeones-filtro .ac-accordion__item[open] .ac-accordion__chev{
  transform: rotate(180deg);
  background-color: var(--color-principal-500);
}

/* CONTENEDOR GENERAL */
.ac-accordion {
  width: 100%;
  border-top: 1px solid #D6DBE6;
}

/* ITEM */
.ac-accordion__item {
  border-bottom: 1px solid #D6DBE6;
}


/* SUMMARY (BOTON) */
.ac-accordion__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px 18px;

  font-size: 16px;
  font-weight: 600;

  list-style: none;
  cursor: pointer;

  color: var(--color-secundario-700);
  background: #ffffff;

  transition: all .25s ease;
}

/* Quitar marcador default */
.ac-accordion__summary::-webkit-details-marker {
  display: none;
}

/* HOVER */
.ac-accordion__summary:hover {
  background: #F7F8FA;
}

/* ESTADO ABIERTO */
.ac-accordion__item[open] .ac-accordion__summary {
  background: var(--color-secundario-100);
  color: var(--color-principal-500);
  border-bottom: 2px solid #C4002F;
}

/* CONTENIDO */
.ac-accordion__body {
  padding: 25px 0 !important;
  background: #ffffff;
  line-height: 1.5;
}
.ac-accordion__body ul li{
    font-family: var(--font-primary);
    list-style: none;
}
.ac-accordion__body ul li a b{
    color: var(--color-principal-500);
    padding-right: 10px;
}

/* ICONO */
.ac-accordion__chev {
  font-size: 20px;
  color: #4E5977;
  transition: transform .3s ease;
}

/* ROTACION */
.ac-accordion__item[open] .ac-accordion__chev {
  transform: rotate(180deg);
}

/* FOCUS ACCESIBLE */
.ac-accordion__summary:focus-visible {
  outline: 3px solid #4E5977;
  outline-offset: 3px;
}

/* QUITAR FOCUS POR CLICK */
.ac-accordion__summary:focus:not(:focus-visible) {
  outline: none;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width: 768px){

  .acordeones-filtro__row{
    flex-direction: column;
    align-items: stretch;
  }

  .acordeones-filtro__select,
  .acordeones-filtro__input{
    width: 100%;
  }

  .acordeones-filtro__actions{
    justify-content: flex-start;
  }

}