/* app7 — la pantalla propia de cada lista importada */

.volver-listas{margin-bottom:.9rem}

.lista-titulo{align-items:center;gap:.7rem;flex-wrap:wrap}
.lista-titulo h2{margin:0}
.lista-titulo .et{flex:none}

.lista-ficha{color:var(--tx3);font-size:.72rem;line-height:1.6;margin:-.4rem 0 1rem}

/* La segunda fila de números va más chica: son datos de apoyo, no el titular. */
.kpis.lista-extra{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:.5rem}
.kpis.lista-extra .kpi{padding:.6rem .65rem}
.kpis.lista-extra .kpi b{font-size:clamp(1rem,6cqi,1.5rem)}

/* Repartir, plegado: está ahí cuando lo necesitás y no molesta cuando no. */
.reparto-lista{padding:0;margin-bottom:1rem}
.reparto-lista summary{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  cursor:pointer;list-style:none;padding:.85rem 1rem;font-family:var(--fd);font-size:1rem;
  letter-spacing:.03em;color:var(--tx2)}
.reparto-lista summary::-webkit-details-marker{display:none}
.reparto-lista summary:hover{color:var(--or)}
.reparto-lista summary i{font-style:normal;font-family:var(--fb);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--or);flex:none}
.reparto-lista[open] summary{border-bottom:1px solid var(--bd)}
.reparto-lista[data-vacio="1"] summary i{color:var(--tx3)}
.reparto-lista > *:not(summary){padding-left:1rem;padding-right:1rem}
.reparto-lista > *:last-child{padding-bottom:1rem}
.reparto-lista .bajada{margin-top:.9rem}

.reparto-cuenta{margin-top:.8rem;font-size:.74rem;color:var(--or);line-height:1.5}

/* El tilde de "solo con teléfono" tiene que leerse como parte de la barra. */
.tilde{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--tx2);
  border:1px solid var(--bd2);background:var(--b2);padding:.5rem .7rem;cursor:pointer;
  border-radius:var(--r);white-space:nowrap;flex:0 0 auto}
.tilde:hover{border-color:rgba(255,106,0,.5);color:var(--tx)}
.tilde input{width:auto;min-width:0;margin:0;accent-color:var(--or);cursor:pointer}

.paginado{display:flex;gap:.6rem;justify-content:center;align-items:center;margin-top:.9rem;flex-wrap:wrap}
.paginado span{font-size:.7rem;color:var(--tx3);letter-spacing:.04em}
.paginado .btn[disabled]{opacity:.35;pointer-events:none}

.et.reventa{background:var(--or-soft);color:var(--or);border-color:rgba(255,106,0,.4)}

/* La lista abierta se marca en el costado, igual que las demás secciones. */
#subListas button.activo{color:var(--or)}
#subListas button.activo i{color:var(--or)}

@media (max-width:560px){
  .lista-ficha{font-size:.68rem}
  .tilde{width:100%;justify-content:flex-start}
  .paginado{gap:.4rem}
  .paginado span{order:3;width:100%;text-align:center}
}

/* La ficha del revendedor: cómo trabaja, dentro de la ficha de la persona. */
.sub-reventa{font-family:var(--fd);font-size:1.05rem;letter-spacing:.04em;color:var(--or);
  margin:1.3rem 0 .6rem;padding-top:1rem;border-top:1px solid var(--bd)}

.datos-reventa{padding:0;margin-top:.8rem}
.datos-reventa summary{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  cursor:pointer;list-style:none;padding:.8rem .95rem;font-family:var(--fd);font-size:.98rem;
  letter-spacing:.03em;color:var(--tx2)}
.datos-reventa summary::-webkit-details-marker{display:none}
.datos-reventa summary:hover{color:var(--or)}
.datos-reventa summary i{font-style:normal;font-family:var(--fb);font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);flex:none}
.datos-reventa[open] summary{border-bottom:1px solid var(--bd)}
.datos-reventa > *:not(summary){padding-left:.95rem;padding-right:.95rem}
.datos-reventa > *:last-child{padding-bottom:.95rem}
.datos-reventa .campos{padding-top:.9rem}
.datos-reventa textarea{min-height:64px}