/* ══════════════════════════════════════════
   HISTORIAL (shared/js/ui/historial.js)
   Última tarjeta de toda página de detalle: plegada por defecto, cabecera
   clicable y cuerpo que se despliega con la animación común (motion.js,
   dcAlternarPanel). Dentro, línea de tiempo de cambios «antes → después».
══════════════════════════════════════════ */

.dc-historial { grid-column: 1 / -1; }

/* Cabecera = botón (toda la franja es clicable). */
.dc-historial-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dc-historial-cabecera:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
.dc-historial-cabecera .card-title-sm { flex: 0 0 auto; }
.dc-historial-resumen {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text3);
  font-size: 12px;
  transition: opacity 220ms ease;
}
/* El resumen (nº de cambios, último cambio) solo se ve con la tarjeta desplegada;
   plegada queda el hueco para que el chevrón siga a la derecha. */
.dc-historial-cabecera:not(.is-open) .dc-historial-resumen { opacity: 0; visibility: hidden; }
.dc-historial-chevron { flex: 0 0 auto; display: inline-flex; width: 18px; height: 18px; color: var(--text3); transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.dc-historial-chevron svg { width: 100%; height: 100%; }
.dc-historial-cabecera:hover .dc-historial-chevron { color: var(--text); }
.dc-historial-cabecera.is-open .dc-historial-chevron { transform: rotate(180deg); }
.dc-historial-cabecera.is-cargando .dc-historial-chevron { animation: dcHistorialPulso 900ms ease-in-out infinite; }
@keyframes dcHistorialPulso { 50% { opacity: 0.35; } }

/* Cuerpo plegable: oculto hasta que dcAlternarPanel lo abre. */
.dc-historial-cuerpo { display: none; }
.dc-historial-cuerpo.open,
.dc-historial-cuerpo.is-closing { display: block; }
.dc-historial-cuerpo.is-animando { overflow: hidden; }
.dc-historial-cuerpo.is-closing { pointer-events: none; }
.dc-historial-contenido { display: flex; flex-direction: column; gap: 12px; }

.dc-historial-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--text3); font-size: 12.5px; }
.dc-historial-estado.is-error { color: var(--red); }

/* Filtros (origen / registro). */
.dc-historial-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-historial-filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg2);
  color: var(--text2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.dc-historial-filtro:hover { color: var(--text); background: var(--bg3); }
.dc-historial-filtro.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.dc-historial-filtro-n { color: var(--text3); font-variant-numeric: tabular-nums; }
.dc-historial-filtro.is-active .dc-historial-filtro-n { color: inherit; }

/* Línea de tiempo. */
.dc-historial-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dc-historial-item { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.dc-historial-item:last-child { padding-bottom: 0; }
.dc-historial-item:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--border); }
.dc-historial-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg4);
  color: var(--text2);
  font-size: 11.5px;
  font-weight: 600;
}
.dc-historial-avatar svg { width: 16px; height: 16px; }
.dc-historial-avatar.is-sistema { background: var(--bg3); color: var(--text3); }
.dc-historial-item.is-ultimo .dc-historial-avatar { background: var(--accent-soft); color: var(--accent); }
.dc-historial-tarjeta { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg2); }
.dc-historial-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; }
.dc-historial-quien { font-weight: 600; color: var(--text); }
.dc-historial-detalle,
.dc-historial-cuando { color: var(--text3); }
.dc-historial-sujeto { margin-top: 6px; color: var(--text2); font-size: 12px; font-weight: 600; }
.dc-historial-resumen-texto { margin: 6px 0 0; color: var(--text2); font-size: 12.5px; }
.dc-historial-cambios { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.dc-historial-cambio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; }
.dc-historial-campo { color: var(--text2); }
.dc-historial-cambio .dc-historial-campo:not(:only-child)::after { content: ':'; }
.dc-historial-valor { max-width: 100%; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--bg3); white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-historial-valor.is-antes { color: var(--text3); text-decoration: line-through; }
.dc-historial-valor.is-despues { color: var(--text); background: var(--accent-soft); }
.dc-historial-vacio { color: var(--text3); font-style: italic; text-decoration: none; }
.dc-historial-flecha { color: var(--text3); }
.dc-historial-mas-cambios {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.dc-historial-mas-cambios:hover { text-decoration: underline; }
.dc-historial-mas { align-self: flex-start; }

@media (max-width: 640px) {
  .dc-historial-resumen { display: none; }
  .dc-historial-cabecera .card-title-sm { flex: 1 1 auto; }
  .dc-historial-tarjeta { padding: 8px 10px; }
}

/* Tarjeta «Correos enviados» de la ficha de Portfolio IA (correosIniciativaView.js): mismo aspecto */
.correos-ini { margin-top: 16px; }
.correos-ini-vacio { padding: 6px 2px; font-size: 13px; color: var(--text3); }
.correos-ini-vacio.is-error, .correos-ini-error { color: var(--red); }
.correos-ini-error { margin-top: 4px; font-size: 11px; }
.correos-ini-tabla table { min-width: 760px; }
.correos-ini-dest { font-size: 12px; overflow-wrap: anywhere; }