/* ============================================================
   comunicaciones.css — historial de emails con el cliente
   (T1, 2026-09-13, docs/contrato-comunicaciones.md).
   ------------------------------------------------------------
   Solo lo EXCLUSIVO de esta feature: el filtro de la sección
   Actividad, la banda de sync de Graph, y la hoja `email-sheet.js`
   (que reusa `.sheet/.sheet-hd/.flabel/.form-error/.frow/.lbl/.val`
   del sistema — acá solo lo que esos archivos no cubren).
   Contraste medido en los DOS temas contra `--surface` real
   (mismo patrón que el resto de `tokens.css`).
   ============================================================ */

/* ---- Filtro Todo/Emails/Contactos/Tareas (Actividad, components/timeline.js) ---- */
/* `.seg` ya trae el look (app.css); acá solo el tamaño reducido para convivir en el `.group-hd`
   MAYÚSCULA/caption del bloque Actividad, que es más chico que donde `.seg` vive normalmente
   (pipeline/cobranzas/embudo, con su propio renglón). */
.tl-filtro-seg { font-size: 11px; }
.tl-filtro-seg button { padding: 0 8px; font-size: 11px; }

/* ---- Contenedor de las filas del timeline, ahora que el filtro puede repintarlas sin
   re-renderizar todo el grupo (components/timeline.js::pintarEntries). Sin estilos propios: el
   layout ya lo dan `.tl-row`/`.tl-group` de app.css — esta clase es solo el punto de montaje. ---- */
.tl-list { display: contents; }

/* ---- Banda de sync de Graph (T2 todavía no existe): informa, no alarma — mismo criterio que
   `.emails-vacio` (ADR-018/2026-09-08): `--text-2`, nunca `--text-4` (tokens.css lo documenta como
   "SOLO placeholder/decorativo — no texto informativo"). Claro 7,9:1 · oscuro 6,88:1 (heredado de
   `--text-2`, ya validado en tokens.css). */
.tl-sync-note {
  font-size: var(--fs-sm); color: var(--text-2); margin: 0;
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
}

/* ---- Hoja "Ver completo" (email-sheet.js) ---- */
.email-meta { padding: var(--sp-2) var(--sp-4) 0; }
.email-meta .frow { padding: var(--sp-1) 0; min-height: 0; }
.email-meta .val { word-break: break-word; }

.email-text {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body-lg); color: var(--text-1); line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* "Este email es muy largo…" — informa, mismo tratamiento que `.tl-sync-note` (texto, no alarma:
   un email largo no es un error). */
.email-truncado-note {
  font-size: var(--fs-sm); color: var(--text-2); margin: 0;
  padding: 0 var(--sp-4) var(--sp-2);
}

.email-acciones {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; row-gap: var(--sp-2);
  padding: 0 var(--sp-4) var(--sp-3);
}

/* Blanco táctil ≥44px sin agrandar la caja visual — mismo patrón que `.seg button::after` /
   `.tc-del::after` de app.css (§4.1 nº6: un truco, un lugar; acá se repite porque los botones
   viven en un archivo de CSS distinto y no comparten selector con esos). */
@media (pointer: coarse) {
  .email-acciones .btn { position: relative; }
  .email-acciones .btn::after { content: ""; position: absolute; inset: -10px -4px; }
}

/* El iframe SANDBOXEADO — nunca `allow-scripts` (ver email-sheet.js::buildIframe). El alto lo
   fija JS al cargar (`contentDocument.scrollHeight`, tope 70vh = MAX_IFRAME_H); acá solo el marco
   visual y un alto de arranque razonable mientras el `load` todavía no disparó. */
.email-iframe-wrap {
  margin: 0 var(--sp-4) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
  background: var(--surface-2);
}
.email-iframe {
  display: block; width: 100%; height: 220px; max-height: 480px;
  border: 0; background: #fff; /* el email siempre se lee sobre blanco, en los dos temas */
}

/* `.img-omitida` — mismo estilo del documento PRINCIPAL (§2 del contrato). El iframe de arriba
   NO puede leer esta hoja (documento separado, `srcdoc`): lleva su propia copia mínima inline en
   `email-sheet.js::IFRAME_CSS`. Esta definición es para cualquier lugar del propio CRM que llegue
   a mostrar el mismo marcador fuera del iframe (consistencia visual, §4.1 nº6). */
.img-omitida {
  display: inline-block; padding: 3px 8px; border-radius: 6px;
  background: var(--gray-soft); color: var(--text-3); font-size: var(--fs-chip);
}