/* ==========================================================================
   LeadSync - Texto largo que se abre por escalones (.plegable)

   Lo describio el, con capturas de WhatsApp al lado: "empieza hasta 3 lineas, luego sale un
   chevron down que despliega mas, luego pasa a ser 12 lineas, luego 21 lineas, y asi va".
   Lo usan la transcripcion de una nota de voz (A89) y, cuando toque, los mensajes largos
   (A82): es el mismo gesto, y dos copias se separan en cuanto alguien ajuste los escalones.

   TRES COSAS QUE SE ME PASARON LA PRIMERA VEZ y estaban en sus capturas -me las volvio a
   pedir senialando las imagenes-:

     1. El corte lleva PUNTOS SUSPENSIVOS. Un texto cortado a hueso parece un fallo de
        pintado; con "..." se lee que sigue.
     2. El control es un CHEVRON SOLO, abajo a la derecha. No un enlace "Ver mas" a la
        izquierda: eso compite con el texto y ocupa una linea entera que no dice nada.
     3. El texto va APAGADO (ver transcripcion.css): es una cita, no un mensaje.

   OJO CON EL ORDEN: estos ficheros se enlazan en index.html en un orden concreto y ese
   orden ES la cascada. Si anades uno nuevo, ponlo donde le toque, no al final.
   ========================================================================== */

/* EL RECORTE ES `-webkit-line-clamp` Y NO UN max-height A PELO, y esa es la diferencia que
   da los puntos suspensivos: line-clamp corta POR LINEAS y pone la elipsis el navegador, en
   el sitio exacto donde cabe. Con max-height el corte cae a media letra y no hay "...".

   El numero de lineas lo pone el JS en --tr-lineas porque los escalones son suyos.

   `max-height` sigue ahi, puesto tambien por el JS, y NO es redundante: es lo unico que se
   puede animar. line-clamp cambia de golpe; el alto acompania. Los dos dicen lo mismo -el
   mismo numero de lineas- asi que no se pelean. */
.plegable {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--tr-lineas, 3);
  overflow: hidden;
}

/* Sitio para el chevron, que va encima a la derecha. Sin esto la ultima linea se le mete
   debajo y se leen las dos cosas superpuestas. */
.plegable:not(.plegable-abierto) {
  padding-right: 22px;
}

/* LA TRANSICION SE ENCIENDE DESPUES DEL PRIMER ALTO (la clase la anade el JS tras un reflow
   forzado): sin eso, el pliegue inicial se veria animarse solo al aparecer el mensaje, que es
   movimiento que no explica nada -la regla es que el movimiento diga de donde viene algo-. */
.plegable-animado {
  transition: max-height .2s ease;
}

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

/* Abierto del todo: se suelta el limite para que un cambio de ancho -arrastrar el divisor,
   girar el movil- no deje el texto recortado a un alto que ya no le corresponde. Y se sale
   de -webkit-box, que solo hace falta mientras hay algo que recortar. */
.plegable-abierto {
  display: block;

  /* SE APAGA EL RECORTE A MANO y no se confia en que `display: block` lo desactive: el
     line-clamp de toda la vida solo funcionaba dentro de -webkit-box, pero el nuevo ya
     aplica sobre un bloque normal. Sin esta linea, el dia que el navegador estrene esa
     version el texto se quedaria recortado a tres lineas aunque este "abierto". */
  -webkit-line-clamp: none;
  max-height: none !important;
}

/* --- El control ----------------------------------------------------------- */

/* CHEVRON SOLO Y ABAJO A LA DERECHA, como en WhatsApp. El ancla es el contenedor del texto,
   que es quien tiene que llevar `position: relative`. */
.plegable-mas {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  color: var(--text-dim);
}

.plegable-mas:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.plegable-mas .ic {
  width: 16px;
  height: 16px;

  /* El chevron gira en vez de cambiarse por otro: es un cambio de estado del propio control
     y se lee mejor si se ve girar. */
  transition: transform .2s ease;
}

.plegable-menos .ic {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .plegable-mas .ic { transition: none; }
}