/* Buzon de soporte y sugerencias: lista de tickets + hilo de mensajes. */

.tickets-lista { display: flex; flex-direction: column; gap: 10px; }
.ticket-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--borde); border-radius: var(--radio-md); background: var(--bg-elevado); cursor: pointer; transition: border-color .15s; }
.ticket-item:hover { border-color: var(--marca); }
.ticket-item .asunto { font-weight: 700; font-size: 13.5px; }
.ticket-item .meta { font-size: 12px; color: var(--texto-tenue); margin-top: 2px; }
.ticket-item .lado-derecho { display: flex; align-items: center; gap: 10px; flex: none; }

.hilo { display: flex; flex-direction: column; gap: 12px; max-height: 420px; overflow-y: auto; padding: 4px 2px; margin-bottom: 16px; }
.mensaje-burbuja { max-width: 82%; padding: 10px 14px; border-radius: var(--radio-md); background: var(--bg-sutil); font-size: 13.5px; white-space: pre-wrap; }
.mensaje-burbuja .autor { font-size: 11px; font-weight: 700; color: var(--texto-tenue); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .02em; }
.mensaje-burbuja .cuando { font-size: 10.5px; color: var(--texto-tenue); margin-top: 6px; }
/* "mio" es relativo a quien mira: el propio usuario en su buzon, o el staff en el panel de plataforma. */
.mensaje-burbuja.mio { align-self: flex-end; background: var(--marca-suave); }

.form-responder { display: flex; gap: 10px; align-items: flex-end; }
.form-responder textarea { flex: 1; min-height: 60px; resize: vertical; }