/* «Leer antes de firmar» (enlace personal de lectura). Solo tokens del sistema (styles.css): sirve igual en el chat y en el panel. */
/* El bloque lleva SU PROPIO fondo: en el panel de Abogado el lienzo es claro pero los tokens son los oscuros, y el texto gris
   sobre el lienzo no se leía (contraste medido el 7-oct). Con fondo propio se lee igual en el chat, en el panel y en claro/oscuro. */
.lectura-cuerpo { display: grid; gap: 10px; margin-top: 10px; padding: 12px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; color: var(--text); }
.lectura-cuerpo[hidden] { display: none; }
.lectura-aviso { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.lectura-subtit { margin: 6px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.lectura-firmante,
.lectura-enlace { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.lectura-quien { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.lectura-quien b { font-weight: 600; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.lectura-quien small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.lectura-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lectura-correo { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; align-items: center; }
.lectura-correo-input { flex: 1 1 220px; min-width: 0; min-height: 38px; padding: 6px 10px; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; }
.lectura-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; border: 1px solid transparent; white-space: nowrap; }
.lectura-chip.ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.lectura-chip.warn { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.lectura-chip.mal { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }
.lectura-msg { margin-top: 8px; font-size: 13px; }
.lectura-msg:not(:empty) { display: inline-block; padding: 6px 10px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); }