/* Conversación de un ticket y lista de tickets que se abre al tocar una gráfica (ERP y portal). Solo variables de color de tokens.css. */
.conv{ border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin:0 0 10px; background:var(--panel-2) }
.conv.tecnico{ border-color:var(--accent-line); background:var(--accent-soft) }
.conv.interna{ border-style:dashed; border-color:var(--warn-line); background:var(--warn-soft) }
.conv-cab{ display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; font-size:12px; color:var(--faint) }
.conv-cab b{ color:var(--ink); font-size:13px }
.conv-cab time{ margin-left:auto; font-size:11.5px }
.conv-tag{ font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:1px 7px; border-radius:6px; background:var(--panel); border:1px solid var(--line-strong); color:var(--muted) }
.conv.tecnico .conv-tag{ color:var(--accent-ink); border-color:var(--accent-line) }
.conv.interna .conv-tag{ color:var(--warn); border-color:var(--warn-line) }
.conv p{ margin:6px 0 0; font-size:13.5px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere }
.tl-sis{ font-size:12.5px; color:var(--muted); padding:3px 0 3px 12px; margin:0 0 8px; border-left:2px solid var(--line); display:flex; gap:8px; flex-wrap:wrap; align-items:baseline }
.tl-sis time{ font-size:11.5px; color:var(--faint); margin-left:auto }
.conv-vacio{ font-size:13px; color:var(--faint); margin:0 }
/* «Agregar una respuesta» (ERP) */
.conv-nueva{ margin:0 0 16px; display:flex; flex-direction:column; gap:8px }
.conv-nueva textarea{ width:100%; min-height:78px; border:1px solid var(--line-strong); border-radius:10px; padding:10px 12px; font:inherit; font-size:13.5px; background:var(--panel); color:var(--ink); resize:vertical }
.conv-nueva .conv-fila{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between }
.conv-nueva .conv-ayuda{ font-size:12px; color:var(--faint) }
/* Tarjeta de ticket dentro de la lista */
.tk-card{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:0 0 12px; background:var(--panel) }
.tk-cab{ display:flex; gap:12px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap }
.tk-num{ font-family:var(--mono); font-size:12.5px; color:var(--faint) }
.tk-sub{ font-size:12px; color:var(--faint); margin-top:2px }
.tk-badges{ display:flex; gap:6px; flex-wrap:wrap }
.tk-bloque{ margin-top:12px }
.tk-et{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin-bottom:5px }
.tk-texto{ margin:0; font-size:13.5px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden }
.tk-sin{ margin:0; font-size:13px; color:var(--warn) }
.tk-mas{ margin-top:12px }
.tk-mas summary{ cursor:pointer; font-size:12.5px; font-weight:600; color:var(--detail) }
.tk-mas[open] summary{ margin-bottom:10px }
.tk-pie{ margin-top:12px; display:flex; justify-content:flex-end }
.tk-lista-cab{ display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 12px; font-size:12.5px; color:var(--muted) }