/* Caja contenedora */
.tpv-box {
  margin-top: 10px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  background: #fff;
  overflow: hidden; /* para bordes redondeados en el panel */
  max-width: 600px; /* no invadir todo si el tema tiene ancho grande */
}

/* Botón de cabecera */
.tpv-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem .9rem;
  background: #f7f7f7;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 0.95em;        /* compacto */
  line-height: 1.2;
}

/* Triangulito (caret) */
.tpv-caret {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #333; /* triangulo apuntando abajo */
  transition: transform .25s ease;
}

/* Cuando está expandido, rotamos el caret */
.tpv-box[data-open="true"] .tpv-caret {
  transform: rotate(180deg);
}

/* Panel desplegable con efecto cortina */
.tpv-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.05);
}

/* Cuando el PHP lo renderiza como abierto, le damos altura visible */
.tpv-box[data-open="true"] .tpv-panel {
    max-height: 500px; /* Suficiente para que el contenido sea visible al cargar */
}

/* Cuando está visible, el JS asigna max-height en línea */
.tpv-list {
  list-style: none;
  margin: 0;
  padding: .6rem .9rem .8rem;
  font-size: 0.92em;       /* más pequeño para que sea discreto */
  color: #333;
}

.tpv-item {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .15rem 0;
}

.tpv-range { font-weight: 500; }
.tpv-sep   { opacity: .5; }
.tpv-price { font-weight: 600; }

/* Ajustes responsivos mínimos */
@media (max-width: 480px) {
  .tpv-toggle { font-size: 0.96em; }
  .tpv-list   { font-size: 0.95em; }
}