/* ==========================================================================
   LeadSync — La lista partida en «lo que toca» y «lo que ya no» (item B76)

   Una pieza para tres sitios: la campanita (leídas al final), las sesiones (cerradas al
   final) y reenviar (contactos bloqueados al final). Ver listapartida.js.

   LA ANIMACIÓN NO SE ESCRIBE AQUÍ: la pone `.acc-anim`, que es la que ya usan los demás
   acordeones de la consola y la cablea `wireDetails`. Escribirla otra vez sería tener dos
   acordeones que se mueven distinto, que es justo lo que este componente viene a evitar.
   ========================================================================== */

/* LAS DOS MITADES HEREDAN LA COLOCACION DEL SITIO QUE LAS ACOGE, y esto no es un detalle:
   sin ello, este componente ROMPE el espaciado de quien lo use.

   Paso en cuanto se enchufo a las sesiones, y lo vio el: `.ses-lista` es un flex con
   `gap: 8px` que colocaba las tarjetas, y al meterlas dentro de `.lp-arriba` pasaron a estar
   UN NIVEL MAS ADENTRO — el gap del padre ya no les llegaba y salieron pegadas.

   `gap: inherit` es lo que lo arregla sin que el componente tenga que saber cuanto separa
   cada pantalla sus cosas: la campanita y las sesiones usan huecos distintos, y fijar uno
   aqui obligaria a pelearlo desde fuera en la otra. Si el padre no declara `gap`, hereda 0 y
   se comporta como antes. */
/* EL HUECO ENTRE ELEMENTOS LO DECLARA QUIEN ACOGE LA LISTA, con `--lp-gap`.

   POR QUE UNA VARIABLE Y NO `gap: inherit`, que fue lo que probe primero y NO FUNCIONA: `gap`
   no es una propiedad heredable, asi que `inherit` toma el valor del PADRE INMEDIATO y hay que
   encadenarlo elemento a elemento. Lo encadene —contenedor, <details>, mitad de abajo— y aun
   asi la de abajo salia con `normal`: MEDIDO en el navegador, no supuesto. Las propiedades
   personalizadas SI se heredan por el arbol de forma nativa, asi que declararla una vez en el
   contenedor llega a las dos mitades sin cadena que se pueda romper.

   Y ADEMAS ES UN CONTRATO EXPLICITO: cada pantalla separa sus cosas distinto —las tarjetas de
   sesion respiran mas que las filas de la campanita—, asi que el componente no puede elegir
   por ellas. Sin `--lp-gap` sale 0 y se comporta como una lista pegada, que es lo que era
   antes de existir este componente.

   Lo rompi dos veces y lo cazo el las dos: "rompiste el espaciado arriba y abajo, esta
   pegado" y "en esta lista tambien estan pegados, haz las cosas bien". */
.lp-arriba,
.lp-plegado,
.lp-abajo {
  display: flex;
  flex-direction: column;
  gap: var(--lp-gap, 0px);
  min-width: 0;
}

/* El resumen es la línea que se pulsa. Es un <summary> de verdad, así que ya lo alcanza el
   teclado; lo único que hay que quitarle es el triangulito del navegador, que no se puede
   vestir y convive mal con el chevron propio. */
.lp-resumen {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  color: var(--text-dim);
  user-select: none;
  /* Cambio de estado, no de sitio: solo el color (un resumen que se desplaza al pasar por
     encima arrastra la lista entera detrás). */
  transition: background-color 120ms ease, color 120ms ease;
}
.lp-resumen::-webkit-details-marker { display: none; }
.lp-resumen::marker { content: ""; }

.lp-resumen:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* Y EL FOCO SE VE. Un <summary> pulsable que no dice dónde está el teclado deja al que navega
   sin ratón sin saber qué va a abrir. */
.lp-resumen:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 6px;
}

/* El chevron gira al abrir. ES LA ÚNICA PISTA DE HACIA DÓNDE VA el panel, y por eso se anima
   aunque el contenido tenga su propia entrada: sin giro, el mismo icono significa dos estados
   distintos. */
.lp-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  transition: transform 180ms ease;
}
.lp-chevron .ic { width: 14px; height: 14px; }
.lp-plegado[open] > .lp-resumen .lp-chevron { transform: rotate(180deg); }

.lp-rotulo { flex: 1 1 auto; min-width: 0; }

/* EL NÚMERO NO ES DECORACIÓN: sin él hay que abrir el acordeón para saber si dentro hay algo,
   y entonces plegar no ahorra nada. Tabular para que no baile entre repintados. */
.lp-cuenta {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-hover);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* La raya separa lo accionable de lo que ya no pide nada. Va ARRIBA del resumen y no debajo:
   marca dónde termina lo que hay que atender, que es la pregunta que se hace quien mira. */
.lp-plegado {
  border-top: 1px solid var(--border);
  /* El hueco lo pone el `gap` del contenedor, igual que entre dos tarjetas: un margen propio
     aqui se SUMARIA al del padre y el acordeon quedaria mas separado que todo lo demas. */
  padding-top: 4px;
}

/* Sin nada arriba, el acordeón nace abierto y la raya sobra: no separa nada. */
.lp-plegado[open]:first-child {
  border-top: 0;
  padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lp-chevron { transition: none; }
}