/* public/modulos.css — modulos del chat (Fase 4+ de "actuar, ver, comparar y guiar"):
   tarjeta de enlace, tarjeta de accion, pasos... Archivo NUEVO a proposito (invariante 6
   del plan aprobado): cero lineas nuevas al final de styles.css y cero cambios a
   .chatpane, para no chocar con el rediseno de nav de 4 secciones (que si toca ese
   archivo). Reusa los tokens y clases reales que ya existen (--paper/--bone/--hair/--ink/
   --muted/--r/--t-meta/--t-texto/--line2/--accent/--blue/--red, .pill/.pill-red/
   .pill-blue/.pill-ghost/.btn/.btn-sm/.btn-gh/.f1/.empty): ningun token nuevo aqui.

   Todo lo de aqui vive DENTRO de .w-body (mismo patron que el db-mini-bar de
   montarVistaDeXarpie en bases.js, no el "sub/pie como hermano de w-body" del lienzo de
   /design -- ese dibujo era para comunicar la anatomia, esto es la implementacion real
   sobre la tarjeta que ya existe). .w-body trae padding:6px 15px 14px (styles.css) -- por
   eso .mod-pie compensa ese padding con margen negativo para que su borde superior llegue
   de canto a canto, igual que ya hace el encabezado de la tarjeta arriba. */

.mod-sub{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:2px; }

.mod-enlace{ display:flex; gap:10px; align-items:center; padding:11px 12px; background:var(--bone); border-radius:var(--r); margin-top:8px; }
.mod-enlace-ico{ width:16px; height:16px; flex:0 0 16px; color:var(--muted); display:inline-flex; }
.mod-enlace-ico svg{ display:block; width:100%; height:100%; }
.mod-enlace-u{ flex:1 1 auto; min-width:0; font-size:var(--t-texto); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

.mod-pie{ display:flex; align-items:center; gap:8px; margin:10px -15px -14px; padding:12px 15px 14px; border-top:1px solid var(--hair); }

/* Vista previa de un mensaje saliente (tarjeta de accion, Fase 5): recortada a pocas
   lineas con un desvanecido al fondo -- tecnica real de truncado, no un adorno; el mismo
   patron que ya usan las apps de correo para una vista previa mas larga que el espacio. */
.mod-previo{ padding:11px 12px; background:var(--deep); border-radius:var(--r); font-size:var(--t-texto); line-height:1.55; color:var(--ink); max-height:96px; overflow:hidden; position:relative; margin-top:8px; }
.mod-previo::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:26px; background:linear-gradient(transparent,var(--deep)); }
.mod-previo.sinrecorte{ max-height:none; }
.mod-previo.sinrecorte::after{ display:none; }

@container (max-width:380px){
  .mod-sub .pill:nth-child(n+2){ display:none; }
}

/* Comparativa de 2 lados con varias metricas (modulos del chat, Fase 6): tabla chica,
   una fila por metrica, columna final con la diferencia en color. El tile de 1 metrica
   y las barras pareadas de 3-4 lados reusan clases que ya existen (.ing-top/.ceo-d de
   finanzas, .barrow de siempre) -- esto es SOLO lo que faltaba. */
.db-cmp-tabla{ width:100%; border-collapse:collapse; font-size:var(--t-texto); }
.db-cmp-tabla th{ font-size:var(--t-eti); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:left; font-weight:600; padding:8px 6px; border-bottom:1px solid var(--hair); }
.db-cmp-tabla td{ padding:10px 6px; border-bottom:1px solid var(--hair); }
.db-cmp-tabla tr:last-child td{ border-bottom:0; }
.db-cmp-tabla th.num, .db-cmp-tabla td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.db-cmp-tabla .delta-up{ color:var(--blue); font-weight:600; }
.db-cmp-tabla .delta-down{ color:var(--red); font-weight:600; }

/* Pasos (modulos del chat, Fase 7): stepper vertical, 3 fuentes (evento/preparar/guia).
   Prefijo "paso-" (no "step-", que ya usa .step-row en styles.css para otra cosa). No
   reusa flDiagrama a proposito: su geometria de eje de tiempo (flujo-escala.js) degrada
   sin etiqueta bajo ~600px, y preparar/guia no tienen fechas que posicionar en un eje. */
.paso-fila{ display:flex; gap:12px; }
.paso-riel{ display:flex; flex-direction:column; align-items:center; width:20px; flex:0 0 20px; }
.paso-punto{ width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 18px; }
.paso-punto.paso-hecho{ background:var(--blue); color:#fff; }
.paso-punto.paso-hecho svg{ width:10px; height:10px; }
.paso-punto.paso-actual{ border:2px solid var(--accent); background:var(--paper); }
.paso-punto-in{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
.paso-punto.paso-pendiente{ border:2px solid var(--line2); background:var(--paper); }
.paso-linea{ width:2px; flex:1; background:var(--line2); margin:2px 0; min-height:22px; }
.paso-linea-hecho{ background:var(--blue); }
.paso-cuerpo{ padding-bottom:22px; flex:1; min-width:0; }
.paso-titulo{ font-size:var(--t-texto); font-weight:500; }
.paso-titulo-pendiente{ color:var(--muted); font-weight:400; }
.paso-meta{ font-size:var(--t-meta); color:var(--muted); margin-top:2px; }
.paso-accion{ font-size:var(--t-meta); color:var(--accent); margin-top:5px; display:inline-block; text-decoration:none; font-weight:500; }
.paso-accion:hover{ text-decoration:underline; }
@container (max-width:420px){
  .paso-meta{ margin-top:1px; }
}