/* plegable.css — Un mensaje ya enviado, plegado a su asunto. — CPM
 *
 * Lo comparten las DOS pantallas que listan mensajes enviados: las
 * notificaciones del panel de jefatura (jefatura.php) y la mensajería del
 * profesorado (mensajeria.php). Vive una sola vez a propósito: son exactamente
 * las mismas reglas, y con una copia en cada hoja acabarían desincronizadas
 * —ya pasó en jefatura.css con el rayado de Cargo/LPASA—, de modo que el mismo
 * mensaje se vería distinto según quién lo mirase.
 *
 * Es <details>/<summary> NATIVO, como las secciones del área del alumnado: sin
 * JavaScript que mantener, se abre con el teclado, el navegador se encarga del
 * foco y el buscador del navegador (Ctrl+F) encuentra también lo plegado. El
 * triángulo que gira es el del acordeón de jefatura, que es el gesto que ya
 * conoce quien usa el panel.
 *
 * Los botones de cada mensaje (editar, borrar…) van FUERA del <summary>, como
 * hermanos suyos. Dentro, un clic en un botón abriría además el desplegable, y
 * taparlo con stopPropagation() es de esas cosas que funcionan hasta que
 * alguien añade el tercer botón y se le olvida.
 */

/* OJO: style.css viste TODOS los <details> del sitio —borde crema, banda
   dorada en el summary y padding a cada <p> y <div> de dentro—, que es lo que
   quiere una sección desplegable suelta pero no una lista de treinta mensajes:
   cada fila saldría con su propia cabecera dorada. Así que aquí se desactiva
   ese vestido a mano. Si alguna vez esto se ve con banda dorada, es que se ha
   añadido una propiedad nueva a esas reglas globales y falta neutralizarla. */
.plegable {
  min-width    : 0;   /* sin esto el recorte del asunto no puede encoger dentro de un flex */
  border       : 0;
  border-radius: 0;
  margin       : 0;
  background   : none;
  overflow     : visible;
}

.plegable > summary {
  display    : flex;
  gap        : var(--space-xs);
  align-items: flex-start;
  cursor     : pointer;
  list-style : none;   /* el triángulo lo ponemos nosotros, más abajo */
  padding    : 0;
  background : none;
  border     : 0;
  color      : inherit;
  font-weight: 400;    /* el negrita lo lleva solo el asunto */
}
.plegable > summary:hover { background: none; color: inherit; }
.plegable > summary::-webkit-details-marker { display: none; }

/* Las reglas globales dan padding a cualquier <p>/<div> dentro de un <details>;
   dentro de una fila de la lista ese hueco descuadra el texto con su asunto. */
.plegable__cuerpo,
.plegable__texto,
.plegable__meta { padding: 0; }

.plegable > summary::before {
  content   : '▼';
  display   : inline-block;   /* un ::before en línea no acepta transform */
  flex      : 0 0 auto;
  font-size : 0.7rem;
  line-height: 1.7;
  color     : var(--color-texto-suave);
  transition: transform var(--transition);
}
.plegable[open] > summary::before { transform: rotate(180deg); }

.plegable > summary:hover .plegable__titulo { text-decoration: underline; }

.plegable__resumen {
  display       : flex;
  flex-direction: column;
  min-width     : 0;
}

/* El asunto es lo que se escanea, así que ocupa UNA línea y se corta con
   puntos suspensivos. Sin el recorte, un mensaje sin asunto entra aquí entero
   y deshace justo el ahorro de espacio que motiva todo esto. */
.plegable__titulo {
  font-weight  : 700;
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
}

.plegable__meta {
  font-size: var(--text-sm);
  color    : var(--color-texto-suave);
}

/* Un mensaje muy largo, abierto, volvería a comerse la pantalla. Se le pone
   tope y barra propia: así ni el desplegado empuja al resto de la lista fuera
   de la vista. */
.plegable__cuerpo {
  margin-top: var(--space-xs);
  max-height: 40vh;
  overflow-y: auto;
}

.plegable__texto {
  white-space: pre-line;   /* respeta los saltos del textarea sin meter <br> */
  margin     : 0 0 var(--space-xs);
}