/* ERP EMTEL v3.39 — filtros colapsables con proporción para textos largos.
   La fila principal prioriza Programa/Grupo; la fila secundaria se anima con
   max-height, opacity y transform. No se usa display:none para la transición. */

.filter-container.collapsible-filter-v339 {
  --filter-gap: 1rem;
  margin: 1rem 0 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-container);
  box-shadow: var(--shadow-sm);
}

.collapsible-filter-v339 .main-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--filter-gap);
}

.collapsible-filter-v339 .filter-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .42rem;
  margin: 0;
}

.collapsible-filter-v339 .col-main {
  flex: 3 1 300px;
  min-width: min(100%, 250px);
}

.collapsible-filter-v339 .col-secondary {
  flex: 2 1 240px;
  min-width: min(100%, 200px);
}

.collapsible-filter-v339 .col-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: .75rem;
  margin-left: auto;
}

.collapsible-filter-v339 .filter-label {
  display: flex;
  align-items: center;
  gap: .32rem;
  min-height: 18px;
  color: var(--info-text, var(--primary-700, var(--primary)));
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1.2;
  text-transform: uppercase;
}


.collapsible-filter-v339 .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.collapsible-filter-v339 .filter-label .icon-svg {
  width: 15px;
  height: 15px;
}

.collapsible-filter-v339 .filter-select,
.collapsible-filter-v339 .filter-input,
.collapsible-filter-v339 .input-icon {
  width: 100%;
  min-width: 0;
}

.collapsible-filter-v339 .filter-select,
.collapsible-filter-v339 .filter-input {
  min-height: 42px;
  padding-top: .6rem;
  padding-bottom: .6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collapsible-filter-v339 .btn-search,
.collapsible-filter-v339 .btn-toggle-adv {
  min-height: 42px;
  white-space: nowrap;
}

.collapsible-filter-v339 .btn-toggle-adv {
  background: var(--bg-body) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
  transition:
    transform .28s cubic-bezier(.175, .885, .32, 1.275),
    border-color .25s ease,
    color .25s ease,
    background-color .25s ease !important;
}

.collapsible-filter-v339 .btn-toggle-adv:hover,
.collapsible-filter-v339 .btn-toggle-adv:focus-visible,
.collapsible-filter-v339 .btn-toggle-adv.open {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  transform: translateY(-1px);
}

.collapsible-filter-v339 .filter-toggle-icon {
  display: inline-grid;
  place-items: center;
  transform: rotate(0deg);
  transition: transform .4s cubic-bezier(.175, .885, .32, 1.275);
}

.collapsible-filter-v339 .btn-toggle-adv.open .filter-toggle-icon {
  transform: rotate(180deg);
}

.collapsible-filter-v339 .advanced-panel {
  visibility: hidden;
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition:
    max-height .48s cubic-bezier(.4, 0, .2, 1),
    margin-top .4s cubic-bezier(.4, 0, .2, 1),
    padding-top .4s cubic-bezier(.4, 0, .2, 1),
    opacity .28s ease,
    transform .4s cubic-bezier(.175, .885, .32, 1.275),
    visibility 0s linear .48s;
}

.collapsible-filter-v339 .advanced-panel.show {
  visibility: visible;
  max-height: 520px;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  overflow: visible;
  border-top: 1px dashed var(--border-color);
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.collapsible-filter-v339 .advanced-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--filter-gap);
}

.collapsible-filter-v339 .col-2x {
  flex: 2 1 210px;
  min-width: min(100%, 180px);
}

.collapsible-filter-v339 .col-1-5x {
  flex: 1.5 1 165px;
  min-width: min(100%, 140px);
}

.collapsible-filter-v339 .col-xs {
  flex: .8 1 100px;
  min-width: 90px;
  max-width: 150px;
}

.collapsible-filter-v339 .col-actions-inline-v339 {
  flex: 0 0 auto;
  min-width: 140px;
}

.turn-filter-container-v339 .day-check-filter {
  min-height: 42px;
  align-items: center;
  padding: .25rem .35rem;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-input);
}

@media (max-width: 980px) {
  .collapsible-filter-v339 .col-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
    margin-left: 0;
  }

  .collapsible-filter-v339 .advanced-panel.show {
    max-height: 780px;
  }
}

@media (max-width: 640px) {
  .filter-container.collapsible-filter-v339 {
    padding: 1rem;
  }

  .collapsible-filter-v339 .col-main,
  .collapsible-filter-v339 .col-secondary,
  .collapsible-filter-v339 .col-2x,
  .collapsible-filter-v339 .col-1-5x,
  .collapsible-filter-v339 .col-xs,
  .collapsible-filter-v339 .col-actions-inline-v339 {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .collapsible-filter-v339 .col-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .collapsible-filter-v339 .btn-search,
  .collapsible-filter-v339 .btn-toggle-adv {
    justify-content: center;
    width: 100%;
  }

  .collapsible-filter-v339 .advanced-panel.show {
    max-height: 1100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .collapsible-filter-v339 .advanced-panel,
  .collapsible-filter-v339 .btn-toggle-adv,
  .collapsible-filter-v339 .filter-toggle-icon {
    transition-duration: .01ms !important;
  }
}