.tracking-status-page { max-width: 90rem; margin: 0 auto; padding: var(--ft-space-10); }
.tracking-detail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(18rem, .6fr); gap: var(--ft-space-5); align-items: start; }
.tracking-status-card { animation: portal-fade-up .45s ease both; }
.tracking-status-card .request-meta { margin-top: var(--ft-space-5); }
.tracking-state { display: flex; align-items: center; justify-content: space-between; gap: var(--ft-space-4); margin-top: var(--ft-space-5); padding: var(--ft-space-4); border: 1px solid rgba(52,120,189,.16); border-radius: var(--ft-radius-md); background: linear-gradient(135deg, var(--ft-sky-100), #fff); }
.tracking-state span, .tracking-reference span { display: block; color: var(--ft-text-muted); font-size: var(--ft-font-xs); font-weight: 650; text-transform: uppercase; }
.tracking-state strong { color: var(--ft-blue-600); font-size: var(--ft-font-lg); }
.tracking-reference { margin-top: var(--ft-space-3); padding: var(--ft-space-4); border: 1px dashed #c8d6e6; border-radius: var(--ft-radius-md); background: var(--ft-surface-soft); }
.tracking-reference code { display: block; margin-top: .3rem; overflow-wrap: anywhere; color: var(--ft-brown-700); font-size: var(--ft-font-sm); }
.tracking-alert { margin-top: var(--ft-space-4); padding: var(--ft-space-3) var(--ft-space-4); border-left: 3px solid var(--ft-green-600); border-radius: var(--ft-radius-sm); color: #256142; background: var(--ft-green-100); }
.tracking-progress-callout { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: var(--ft-space-4); margin-top: var(--ft-space-5); padding: var(--ft-space-5); border: 1px solid rgba(40,103,168,.2); border-radius: var(--ft-radius-md); background: linear-gradient(135deg, var(--ft-blue-100), #fff); box-shadow: 0 10px 28px rgba(40,103,168,.08); }
.tracking-progress-icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: .85rem; color: #fff; background: var(--ft-blue-600); font-size: 1.25rem; font-weight: 800; }
.tracking-progress-callout > div { display: grid; gap: .12rem; }
.tracking-progress-callout small { color: var(--ft-blue-600); font-size: var(--ft-font-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tracking-progress-callout strong { color: var(--ft-brown-900); font: 800 var(--ft-font-lg) Manrope,Inter,sans-serif; }
.tracking-progress-callout p { margin: 0; color: var(--ft-text-secondary); font-size: var(--ft-font-sm); }
.tracking-progress-action { border-color: rgba(169,108,30,.28); background: linear-gradient(135deg, var(--ft-warning-100), #fff); }
.tracking-progress-action .tracking-progress-icon { background: var(--ft-warning-600); }
.tracking-progress-action small { color: var(--ft-warning-600); }
.tracking-progress-complete { border-color: rgba(55,132,90,.25); background: linear-gradient(135deg, var(--ft-green-100), #fff); }
.tracking-progress-complete .tracking-progress-icon { background: var(--ft-green-600); }
.tracking-progress-complete small { color: var(--ft-green-600); }
.tracking-progress-processing .tracking-progress-icon { animation: tracking-spin 2s linear infinite; }
@keyframes tracking-spin { to { transform: rotate(360deg); } }
.tracking-help-card { animation: portal-fade-up .45s ease .1s both; }
.tracking-help-card > p { color: var(--ft-text-secondary); font-size: var(--ft-font-sm); line-height: 1.6; }
.tracking-step { display: grid; grid-template-columns: auto 1fr; gap: .75rem; margin-top: .75rem; padding: .75rem; border-radius: var(--ft-radius-sm); background: var(--ft-surface-soft); }
.tracking-step > span { width: .75rem; height: .75rem; margin-top: .25rem; border: 2px solid #cbd5e1; border-radius: 50%; }
.tracking-step.active > span { border-color: var(--ft-green-600); background: var(--ft-green-600); box-shadow: 0 0 0 4px rgba(55,132,90,.12); }
.tracking-step strong, .tracking-step small { display: block; }
.tracking-step strong { color: var(--ft-brown-900); font-size: var(--ft-font-sm); }
.tracking-step small { margin-top: .15rem; color: var(--ft-text-muted); font-size: var(--ft-font-xs); }
.tracking-related-processes { display: grid; gap: .55rem; margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--ft-border); }
.tracking-related-process { display: grid; grid-template-columns: 2rem minmax(0,1fr); align-items: center; gap: .65rem; padding: .65rem; border: 1px solid var(--ft-border); border-radius: .7rem; background: #fff; }
.tracking-related-process > div { display: grid; min-width: 0; }
.tracking-related-process strong { overflow: hidden; color: var(--ft-ink-900); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.tracking-related-process small { color: var(--ft-text-muted); font-size: .66rem; }
.tracking-related-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .55rem; color: #fff; font-size: .78rem; font-weight: 850; }
.tracking-related-icon.is-running { background: var(--ft-blue-600); }
.tracking-related-icon.is-complete { background: var(--ft-green-600); }
.tracking-related-icon.is-failed { background: var(--ft-red-600); }
.tracking-workspace { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--ft-space-8); align-items: start; margin-top: var(--ft-space-10); }
.workflow-action-panel, .workflow-history-panel { min-width: 0; }
.workflow-action-panel .portal-heading, .workflow-history-panel .portal-heading { margin-bottom: var(--ft-space-5); }
.workflow-action-card { animation: portal-fade-up .45s ease both; }
.workflow-current-task { margin: var(--ft-space-4) 0; padding: var(--ft-space-4); border-left: 4px solid var(--ft-gold-500); border-radius: var(--ft-radius-sm); background: linear-gradient(135deg, #fffaf0, #fff); }
.workflow-current-task-label { display: block; color: var(--ft-warning-600); font-size: var(--ft-font-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.workflow-current-task h2 { margin: .35rem 0 .25rem; font-size: var(--ft-font-lg); }
.workflow-current-task p { margin: 0; color: var(--ft-text-secondary); font-size: var(--ft-font-sm); }
.workflow-action-card form > .mb-3 { margin-bottom: 1.1rem !important; }
.workflow-action-card .request-card.mb-4 { box-shadow: none; }
.workflow-action-card .table { --bs-table-bg: transparent; font-size: var(--ft-font-xs); }
.workflow-action-card .table th { color: var(--ft-text-secondary); font-weight: 650; }
.workflow-action-card .table td { color: var(--ft-text); }
.tracking-list { display: grid; gap: var(--ft-space-4); }
.tracking-empty { min-height: 0; }
.workflow-history-list { position: relative; }
.workflow-history-list::before { position: absolute; top: 1.5rem; bottom: 1.5rem; left: .4rem; width: 2px; background: linear-gradient(var(--ft-blue-500), var(--ft-gold-500)); content: ""; opacity: .3; }
.workflow-history-item { position: relative; display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: var(--ft-space-3); padding: var(--ft-space-4); padding-left: .15rem; border: 1px solid var(--ft-border); border-radius: var(--ft-radius-md); background: rgba(255,255,255,.92); box-shadow: var(--ft-shadow-soft); animation: portal-fade-up .45s ease both; }
.workflow-decision-item { border-color: rgba(197,154,74,.42); background: linear-gradient(145deg, #fff, #fffaf0); }
.workflow-terminal-item { border-width: 2px; box-shadow: 0 12px 30px rgba(55,132,90,.13); }
.workflow-history-marker { position: relative; z-index: 1; width: .82rem; height: .82rem; margin-top: .3rem; border: 3px solid #fff; border-radius: 50%; background: var(--ft-blue-600); box-shadow: 0 0 0 3px rgba(52,120,189,.16); }
.workflow-history-event-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.workflow-transition { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: var(--ft-space-3) 0; }
.workflow-transition strong { padding: .45rem .65rem; border: 1px solid var(--ft-border); border-radius: var(--ft-radius-sm); color: var(--ft-brown-900); background: var(--ft-surface-soft); font-size: var(--ft-font-sm); }
.workflow-transition-arrow { color: var(--ft-blue-600); font-size: 1.2rem; font-weight: 700; }
.workflow-history-actor { display: flex; flex-wrap: wrap; gap: .4rem; color: var(--ft-text-muted); font-size: var(--ft-font-xs); }
.workflow-history-actor strong { color: var(--ft-text); }
.workflow-decision-outcome { display: flex; align-items: center; gap: var(--ft-space-3); margin: var(--ft-space-3) 0; padding: var(--ft-space-3) var(--ft-space-4); border: 1px solid currentColor; border-radius: var(--ft-radius-md); background: rgba(255,255,255,.72); }
.workflow-decision-icon { display: grid; width: 2.45rem; height: 2.45rem; flex: 0 0 auto; place-items: center; border-radius: .75rem; color: #fff; background: currentColor; font-size: 1.35rem; font-weight: 800; }
.workflow-decision-outcome > div { display: grid; gap: .1rem; }
.workflow-decision-outcome small { color: var(--ft-text-muted); font-size: var(--ft-font-xs); font-weight: 650; text-transform: uppercase; }
.workflow-decision-outcome strong { color: var(--ft-brown-900); font-size: var(--ft-font-lg); }
.workflow-terminal-label { color: var(--ft-green-600); font-size: var(--ft-font-xs); font-weight: 700; }
.outcome-success { color: var(--ft-green-600); background: var(--ft-green-100); }
.outcome-danger { color: var(--ft-red-600); background: var(--ft-red-100); }
.outcome-warning { color: var(--ft-warning-600); background: var(--ft-gold-100); }
.outcome-info { color: var(--ft-blue-600); background: var(--ft-sky-100); }
.workflow-history-comment { margin: var(--ft-space-3) 0 0; padding: .7rem .85rem; border-left: 3px solid var(--ft-gold-500); border-radius: 0 var(--ft-radius-sm) var(--ft-radius-sm) 0; color: var(--ft-text-secondary); background: #fffaf0; font-size: var(--ft-font-sm); }
.workflow-history-comment span, .workflow-history-fields-title { color: var(--ft-brown-900); font-weight: 700; }
.workflow-friendly-title { margin: .65rem 0 .4rem !important; color: var(--ft-brown-900); font-size: 1rem !important; font-weight: 750 !important; line-height: 1.4 !important; }
.workflow-history-details { margin-top: .7rem; border-top: 1px solid var(--ft-border); }
.workflow-history-details summary { width: max-content; max-width: 100%; padding-top: .7rem; color: var(--ft-blue-600); cursor: pointer; font-size: .75rem; font-weight: 700; }
.workflow-history-details[open] summary { margin-bottom: .3rem; }
.workflow-history-details .workflow-history-fields { border-top: 0; margin-top: .25rem; padding-top: .25rem; }
.workflow-history-fields { display: grid; gap: .35rem; margin-top: var(--ft-space-3); padding-top: var(--ft-space-3); border-top: 1px solid var(--ft-border); }
.workflow-history-field-change { display: grid; grid-template-columns: minmax(7rem, .75fr) minmax(0, 1.25fr); gap: .75rem; padding: .45rem .6rem; border-radius: var(--ft-radius-sm); background: var(--ft-surface-soft); font-size: var(--ft-font-xs); }
.workflow-history-field-change strong { overflow-wrap: anywhere; color: var(--ft-text-secondary); }
.workflow-history-field-change span { overflow-wrap: anywhere; color: var(--ft-text); }
.workflow-sla { display: flex; flex-wrap: wrap; gap: .35rem .75rem; margin: .7rem 0 1rem; padding: .55rem .7rem; border-left: 3px solid currentColor; border-radius: 0 var(--ft-radius-sm) var(--ft-radius-sm) 0; font-size: .78rem; }
.workflow-sla span { color: var(--ft-text-secondary); }
.workflow-sla-success { color: var(--ft-green-600); background: var(--ft-green-100); }
.workflow-sla-warning { color: var(--ft-warning-600); background: var(--ft-gold-100); }
.workflow-sla-danger { color: var(--ft-red-600); background: var(--ft-red-100); }

/* Item-view navigation inspired by collaborative work surfaces. */
.tracking-status-card {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  overflow: hidden;
  border-top: 0;
}
.tracking-status-card::before {
  display: block;
  height: 4px;
  margin: calc(clamp(1.25rem, 2.5vw, 2rem) * -1) calc(clamp(1.25rem, 2.5vw, 2rem) * -1) 1.35rem;
  background: linear-gradient(90deg,var(--ft-blue-600),var(--ft-blue-400) 55%,var(--ft-gold-500));
  content: "";
}
.tracking-board-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.tracking-board-title { min-width: 0; }
.tracking-board-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: .55rem; }
.tracking-token-chip { display: grid; min-width: 8rem; padding: .45rem .7rem; border: 1px solid var(--ft-border); border-radius: .65rem; background: var(--ft-surface-soft); }
.tracking-token-chip span { color: var(--ft-text-muted); font-size: .62rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.tracking-token-chip code { max-width: 11rem; overflow: hidden; color: var(--ft-brown-700); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.tracking-status-card > h1 {
  max-width: 28ch;
  margin: .35rem 0;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  letter-spacing: -.035em;
}
.tracking-status-card > p { max-width: 46rem; margin: 0; }
.tracking-board-title h1 { max-width: 30ch; margin: .35rem 0; font-size: clamp(1.65rem,3vw,2.35rem); letter-spacing: -.035em; }
.tracking-board-title p { max-width: 44rem; margin: 0; color: var(--ft-text-secondary); }
.tracking-property-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 1.25rem; overflow: hidden; border: 1px solid var(--ft-border); border-radius: .85rem; background: #fff; }
.tracking-property { display: grid; align-content: center; min-height: 5rem; padding: .85rem 1rem; border-right: 1px solid var(--ft-border); }
.tracking-property:last-child { border-right: 0; }
.tracking-property > span { margin-bottom: .28rem; color: var(--ft-text-muted); font-size: .66rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.tracking-property strong { overflow: hidden; color: var(--ft-ink-900); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.tracking-property small { color: var(--ft-text-muted); font-size: .68rem; }
.tracking-status-label { display: inline-flex; width: max-content; max-width: 100%; align-items: center; gap: .42rem; padding: .38rem .62rem; border-radius: .35rem; color: #fff !important; }
.tracking-status-label i { width: .42rem; height: .42rem; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; }
.tracking-status-label.is-progress { background: var(--ft-blue-600); }
.tracking-status-label.is-action { background: var(--ft-warning-600); }
.tracking-status-label.is-complete { background: var(--ft-green-600); }
.tracking-help-card {
  position: sticky;
  top: 1rem;
  border-top: 4px solid var(--ft-blue-500);
}
.tracking-actions-inline .btn { min-height: 2.65rem; }
.status-tabs {
  position: sticky;
  z-index: 20;
  top: .5rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: var(--ft-space-6);
  padding: .3rem .55rem 0;
  overflow-x: auto;
  border: 1px solid rgba(216,212,207,.9);
  border-radius: .85rem .85rem 0 0;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 35px rgba(42,52,77,.09);
  backdrop-filter: blur(16px);
}
.status-tab {
  display: inline-flex;
  min-height: 2.8rem;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: .55rem .55rem 0 0;
  color: var(--ft-text-secondary);
  background: transparent;
  font-size: var(--ft-font-sm);
  font-weight: 720;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.status-tab:hover { color: var(--ft-blue-600); background: var(--ft-blue-100); }
.status-tab.is-active {
  border-bottom-color: var(--ft-blue-600);
  color: var(--ft-blue-600);
  background: var(--ft-blue-100);
  box-shadow: none;
}
.status-tab-icon { font-size: 1rem; font-weight: 850; }
.status-tab strong {
  display: grid;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .3rem;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  border: 2px solid #fff;
  background: var(--ft-red-600);
  box-shadow: 0 0 0 1px rgba(184,55,55,.18), 0 3px 8px rgba(184,55,55,.22);
  font-size: .67rem;
  font-weight: 850;
}
.status-tab.is-active strong { animation: status-badge-attention 1.8s ease-in-out infinite; }
@keyframes status-badge-attention {
  0%, 100% { box-shadow: 0 0 0 1px rgba(184,55,55,.18), 0 3px 8px rgba(184,55,55,.22); }
  50% { box-shadow: 0 0 0 4px rgba(184,55,55,.1), 0 4px 10px rgba(184,55,55,.28); }
}
.status-files-summary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
  padding: 0 .75rem;
  color: var(--ft-text-muted);
  font-size: var(--ft-font-xs);
  white-space: nowrap;
}
.tracking-workspace {
  display: block;
  margin-top: var(--ft-space-6);
}
.status-tab-panel {
  width: 100%;
  min-width: 0;
  animation: portal-fade-up .28s ease both;
}
.status-tab-panel[hidden] { display: none !important; }
.workflow-action-panel,
.workflow-conversation-panel,
.workflow-history-panel {
  padding: clamp(1rem, 2.4vw, 1.75rem);
  border: 1px solid rgba(216,212,207,.9);
  border-radius: var(--ft-radius-lg);
  background: rgba(255,255,255,.82);
  box-shadow: var(--ft-shadow-soft);
}
.workflow-conversation-panel > .portal-heading,
.workflow-action-panel > .portal-heading { margin-bottom: 1rem; }
.workflow-conversation-panel .workflow-conversation-card {
  border: 0;
  background: linear-gradient(180deg, var(--ft-surface-soft), #fff);
  box-shadow: none;
}
.workflow-conversation-list { min-height: 9rem; scroll-behavior: smooth; }
.workflow-conversation-form {
  position: sticky;
  bottom: .5rem;
  z-index: 5;
  padding: 1rem;
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-md);
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 35px rgba(42,52,77,.12);
  backdrop-filter: blur(12px);
}
.workflow-message { transition: transform .18s ease, box-shadow .18s ease; }
.workflow-message:hover { box-shadow: 0 12px 28px rgba(31,49,72,.1); transform: translateY(-1px); }
/* El historial debe ser compacto para que se puedan revisar muchos eventos de un vistazo. */
.workflow-history-item { gap: .6rem; padding: .85rem .85rem .85rem .15rem; }
.workflow-history-item .request-badge { padding: .25rem .45rem; font-size: .68rem; }
.workflow-history-item .tracking-meta { font-size: .72rem; }
.workflow-history-item h2 { margin: .45rem 0 .35rem; font-size: .95rem; line-height: 1.35; }
.workflow-history-actor { gap: .3rem; font-size: .75rem; }
.workflow-transition { gap: .35rem; margin: .65rem 0; }
.workflow-transition strong { padding: .32rem .5rem; font-size: .78rem; }
.workflow-transition-arrow { font-size: 1rem; }
.workflow-decision-outcome { gap: .65rem; margin: .65rem 0; padding: .6rem .75rem; }
.workflow-decision-icon { width: 2rem; height: 2rem; border-radius: .6rem; font-size: 1.05rem; }
.workflow-decision-outcome small { font-size: .65rem; }
.workflow-decision-outcome strong { font-size: .95rem; }
.workflow-terminal-label { font-size: .7rem; }
.workflow-history-comment { margin-top: .65rem; padding: .55rem .7rem; font-size: .8rem; line-height: 1.45; }
.workflow-history-fields { gap: .25rem; margin-top: .65rem; padding-top: .65rem; }
.workflow-history-fields-title { font-size: .72rem; }
.workflow-history-field-change { gap: .55rem; padding: .32rem .45rem; font-size: .72rem; }
@media (max-width: 991.98px) { .tracking-status-page { padding: var(--ft-space-8) var(--ft-space-6); } .tracking-workspace { grid-template-columns: 1fr; gap: var(--ft-space-8); } }
@media (max-width: 767.98px) { .tracking-status-page { padding: var(--ft-space-5) var(--ft-space-4) var(--ft-space-8); } .tracking-detail { grid-template-columns: 1fr; } .tracking-state { align-items: flex-start; flex-direction: column; } .workflow-history-field-change { grid-template-columns: 1fr; gap: .15rem; } }
@media (max-width: 767.98px) {
  .tracking-help-card { position: static; }
  .status-tabs { top: 0; margin-inline: calc(var(--ft-space-4) * -0.35); border-radius: .85rem; }
  .status-files-summary { display: none; }
  .status-tab { flex: 1 0 auto; justify-content: center; padding-inline: .7rem; }
  .workflow-action-panel, .workflow-conversation-panel, .workflow-history-panel { padding: .85rem; }
  .workflow-conversation-form { bottom: .25rem; }
}
@media (max-width: 991.98px) {
  .tracking-board-header { flex-direction: column; }
  .tracking-board-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .tracking-property-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tracking-property:nth-child(2) { border-right: 0; }
  .tracking-property:nth-child(-n+2) { border-bottom: 1px solid var(--ft-border); }
}
@media (max-width: 575.98px) {
  .tracking-board-actions .btn { flex: 1; }
  .tracking-token-chip { width: 100%; }
  .tracking-property-grid { grid-template-columns: 1fr; }
  .tracking-property { min-height: 4.25rem; border-right: 0; border-bottom: 1px solid var(--ft-border); }
  .tracking-property:last-child { border-bottom: 0; }
}

.satisfaction-card { margin: 1.25rem 0 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); border-top: .3rem solid var(--ft-yellow-500, #f5b51b); background: linear-gradient(135deg,#fff 0%,#fffaf0 100%); }
.satisfaction-intro { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.satisfaction-intro h2 { margin: .2rem 0 .35rem; color: var(--ft-ink-900); font-size: clamp(1.3rem,2.5vw,1.8rem); }
.satisfaction-intro p { margin: 0; color: var(--ft-ink-500); }
.satisfaction-icon { display: grid; flex: 0 0 3.3rem; height: 3.3rem; place-items: center; border-radius: 1rem; color: #fff; background: #e8a800; box-shadow: 0 10px 22px rgba(232,168,0,.24); font-size: 1.45rem; }
.satisfaction-form { display: grid; gap: 1.35rem; }
.satisfaction-question { min-width: 0; margin: 0; padding: 0; border: 0; }
.satisfaction-question legend,.satisfaction-comment label { margin-bottom: .7rem; color: var(--ft-ink-900); font-size: .96rem; font-weight: 800; }
.csat-scale { display: flex; flex-wrap: wrap; gap: .5rem; }
.csat-scale label { cursor: pointer; }
.csat-scale input,.nps-scale input { position: absolute; opacity: 0; pointer-events: none; }
.csat-scale label span { display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid #e5dac1; border-radius: .8rem; color: #c6bda9; background: #fff; font-size: 1.5rem; transition: .18s ease; }
.csat-scale label small { display: block; margin-top: .2rem; color: var(--ft-ink-500); text-align: center; }
.csat-scale label:hover span,.csat-scale label:has(input:checked) span { border-color: #e8a800; color: #e8a800; background: #fff7d9; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(232,168,0,.16); }
.nps-scale { display: grid; grid-template-columns: repeat(11,minmax(2.2rem,1fr)); gap: .3rem; }
.nps-scale label span { display: grid; min-height: 2.55rem; place-items: center; border: 1px solid #dce3ea; border-radius: .55rem; color: var(--ft-ink-700); background: #fff; font-weight: 800; cursor: pointer; }
.nps-scale label:has(input:checked) span { border-color: var(--ft-blue-600); color: #fff; background: var(--ft-blue-600); box-shadow: 0 7px 14px rgba(38,103,166,.2); }
.nps-hints { display: flex; justify-content: space-between; margin-top: .35rem; color: var(--ft-ink-500); font-size: .7rem; }
.satisfaction-comment { display: grid; }
.satisfaction-comment textarea { width: 100%; padding: .85rem 1rem; border: 1px solid #dce3ea; border-radius: .8rem; resize: vertical; }
.satisfaction-comment textarea:focus { outline: 3px solid rgba(38,103,166,.12); border-color: var(--ft-blue-600); }
.satisfaction-comment small { margin-top: .35rem; color: var(--ft-ink-500); }
.satisfaction-comment small.is-required { color: var(--portal-danger,#b42318); font-weight: 800; }
.satisfaction-form .btn { justify-self: start; }
.satisfaction-thanks { display: flex; gap: .9rem; align-items: center; margin: 1.25rem 0; padding: 1rem 1.25rem; border-color: #b9dec9; background: #effaf3; }
.satisfaction-thanks > span { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: 50%; color: #fff; background: #278a55; font-weight: 900; }
.satisfaction-thanks p { margin: .15rem 0 0; color: var(--ft-ink-500); }
@media (max-width: 720px) { .nps-scale { grid-template-columns: repeat(6,1fr); } .satisfaction-intro { align-items: center; } }
@media (prefers-reduced-motion: reduce) { .tracking-progress-processing .tracking-progress-icon { animation: none; } }

/* Customer-facing premium timeline */
.tracking-workspace { grid-template-columns: minmax(20rem, .82fr) minmax(30rem, 1.18fr); gap: var(--ft-space-10); }
.workflow-history-panel {
  min-width: 0;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid rgba(216,212,207,.9);
  border-radius: var(--ft-radius-lg);
  background:
    radial-gradient(circle at 100% 0, rgba(52,120,189,.08), transparent 19rem),
    rgba(255,255,255,.78);
  box-shadow: var(--ft-shadow-soft);
}
.history-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.history-heading-row > div { display: grid; }
.history-heading-row .eyebrow { margin-bottom: .45rem; }
.history-heading-row h1 { margin: 0; }
.history-event-count { flex: 0 0 auto; padding: .4rem .7rem; border: 1px solid rgba(52,120,189,.16); border-radius: 999px; color: var(--ft-blue-600); background: var(--ft-blue-100); font-size: .68rem; font-weight: 750; }
.workflow-history-panel > .portal-heading > p { max-width: 38rem; margin-top: .55rem; }
.workflow-history-list { gap: .8rem; padding: .25rem 0 .25rem .15rem; }
.workflow-history-list::before {
  top: 1.8rem;
  bottom: 1.8rem;
  left: 1.18rem;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--ft-blue-500), rgba(197,154,74,.65) 62%, rgba(55,132,90,.55));
  opacity: .34;
}
.workflow-history-item {
  grid-template-columns: 2.15rem minmax(0,1fr);
  gap: 1rem;
  padding: 1.1rem 1.15rem .95rem .15rem;
  border: 0;
  border-radius: var(--ft-radius-md);
  background: rgba(255,255,255,.68);
  box-shadow: none;
}
.workflow-history-item:hover { background: #fff; box-shadow: 0 14px 34px rgba(42,52,77,.09); }
.workflow-history-item.is-latest {
  border: 1px solid rgba(52,120,189,.18);
  background: linear-gradient(135deg, #fff, #f5faff);
  box-shadow: 0 16px 38px rgba(42,90,137,.1);
}
.workflow-history-marker {
  display: grid;
  width: 2.05rem;
  height: 2.05rem;
  margin-top: .05rem;
  place-items: center;
  border: 4px solid #fff;
  color: #fff;
  background: var(--ft-blue-600);
  box-shadow: 0 0 0 3px rgba(52,120,189,.15), 0 7px 14px rgba(42,52,77,.15);
  font-size: .72rem;
  font-weight: 850;
}
.workflow-decision-item .workflow-history-marker { background: var(--ft-gold-500); box-shadow: 0 0 0 3px rgba(197,154,74,.18), 0 7px 14px rgba(42,52,77,.14); }
.workflow-terminal-item .workflow-history-marker { background: var(--ft-green-600); box-shadow: 0 0 0 3px rgba(55,132,90,.17), 0 7px 14px rgba(42,52,77,.14); }
.workflow-terminal-item { border: 1px solid rgba(55,132,90,.22); background: linear-gradient(135deg,#fff,var(--ft-green-100)); }
.workflow-decision-item { border: 1px solid rgba(197,154,74,.2); background: linear-gradient(135deg,#fff,#fffaf0); }
.workflow-history-event-meta > div { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.workflow-history-event-meta .request-badge { border: 0; color: var(--ft-blue-600); background: var(--ft-blue-100); }
.workflow-decision-item .request-badge { color: #88601e; background: var(--ft-gold-100); }
.workflow-terminal-item .request-badge { color: var(--ft-green-600); background: var(--ft-green-100); }
.history-latest-label { color: var(--ft-blue-600); font-size: .64rem; font-weight: 750; }
.workflow-friendly-title { margin-top: .8rem !important; font-size: 1.06rem !important; letter-spacing: -.015em; }
.workflow-history-actor { margin-top: .3rem; }
.workflow-history-comment { border: 1px solid rgba(197,154,74,.18); border-left: 3px solid var(--ft-gold-500); background: linear-gradient(135deg,#fffaf0,#fff); }
.workflow-history-details { border-top-style: dashed; }
.workflow-history-field-change { border: 1px solid rgba(230,224,217,.72); background: rgba(250,249,247,.86); }
@media (max-width: 1199.98px) { .tracking-workspace { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) {
  .workflow-history-panel { padding: 1rem; }
  .history-heading-row { align-items: start; flex-direction: column; }
  .workflow-history-list::before { left: 1rem; }
  .workflow-history-item { grid-template-columns: 1.8rem minmax(0,1fr); gap: .7rem; padding-right: .65rem; }
  .workflow-history-marker { width: 1.75rem; height: 1.75rem; border-width: 3px; }
  .workflow-history-event-meta { align-items: start; flex-direction: column; }
}

/* Public history: warm, customer-facing journey */
.workflow-copilot { display: grid; gap: .8rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid rgba(169,121,41,.24); border-radius: 1rem; background: linear-gradient(135deg,#fff 35%,#fcf5e7); box-shadow: 0 10px 28px rgba(105,75,30,.07); }
.workflow-copilot-heading { display: flex; align-items: center; gap: .75rem; }
.workflow-copilot-heading > div { display: grid; gap: .12rem; }
.workflow-copilot-heading strong { color: var(--ft-brown-900); font-size: .88rem; }
.workflow-copilot-heading small { color: var(--ft-text-muted); font-size: .72rem; }
.workflow-copilot-icon { display: grid; width: 2.2rem; height: 2.2rem; flex: 0 0 auto; place-items: center; border-radius: .7rem; color: #fff; background: linear-gradient(135deg,#704d2f,#bd8a32); box-shadow: 0 6px 14px rgba(112,77,47,.2); }
.workflow-copilot-actions,.workflow-copilot-prompt { display: flex; flex-wrap: wrap; gap: .5rem; }
.workflow-copilot-prompt .form-control { min-width: min(100%,22rem); flex: 1; }
.workflow-copilot-summary { padding: .8rem .9rem; border-left: 3px solid var(--ft-gold-500); border-radius: 0 .65rem .65rem 0; color: var(--ft-text-secondary); background: rgba(255,255,255,.78); font-size: .8rem; line-height: 1.6; white-space: pre-line; }
.workflow-copilot-error { margin: 0; color: var(--ft-red-600); font-size: .75rem; font-weight: 650; }
.workflow-copilot .is-loading { opacity: .65; }
.history-event-count { border-color: rgba(148,111,45,.2); color: var(--ft-brown-900); background: #fbf5e9; }
.workflow-history-list::before { background: linear-gradient(180deg,#a97929,rgba(197,154,74,.58) 62%,rgba(55,132,90,.48)); opacity: .42; }
.workflow-history-item {
  padding: 1.1rem 1.15rem 1.05rem .15rem;
  border: 1px solid #ece7df;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(70,54,36,.055);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.workflow-history-item:hover { border-color: rgba(169,121,41,.28); box-shadow: 0 15px 34px rgba(70,54,36,.1); transform: translateY(-1px); }
.workflow-history-item.is-latest { border-color: rgba(169,121,41,.32); background: linear-gradient(135deg,#fff 48%,#fcf7ec); box-shadow: 0 16px 38px rgba(105,75,30,.11); }
.workflow-history-marker { background: #704d2f; box-shadow: 0 0 0 3px rgba(169,121,41,.16),0 7px 14px rgba(70,54,36,.15); }
.workflow-history-event-meta .request-badge { color: #704d2f; background: #f5ede2; letter-spacing: .025em; }
.history-latest-label { display: inline-flex; align-items: center; gap: .3rem; color: #946f2d; font-size: .66rem; font-weight: 800; }
.history-latest-label::before { width: .38rem; height: .38rem; border-radius: 50%; background: var(--ft-gold-500); box-shadow: 0 0 0 3px rgba(197,154,74,.14); content: ""; }
.workflow-history-date { display: flex; align-items: center; gap: .4rem; color: var(--ft-text-muted); font-size: .7rem; font-weight: 500; }
.workflow-history-date strong { color: #704d2f; font-size: .7rem; font-weight: 750; }
.workflow-history-actor { align-items: center; gap: .55rem; margin-top: .45rem; }
.workflow-history-actor-icon { display: grid; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; place-items: center; border: 1px solid #e4d9ca; border-radius: 50%; color: #704d2f; background: #f8f3eb; font-size: .66rem; font-weight: 850; }
.workflow-history-actor-copy { display: grid; gap: .03rem; }
.workflow-history-actor-copy small { color: var(--ft-text-muted); font-size: .66rem; }
.workflow-history-actor-copy strong { color: var(--ft-brown-900); font-size: .76rem; }
.workflow-history-comment { border-color: rgba(197,154,74,.22); background: linear-gradient(135deg,#fcf6e9,#fff); }
.workflow-history-details { margin-top: .8rem; border: 1px solid #eee7dc; border-radius: .75rem; background: #fcfaf7; overflow: hidden; }
.workflow-history-details summary { display: flex; width: 100%; align-items: center; gap: .7rem; padding: .65rem .75rem; color: #704d2f; list-style: none; }
.workflow-history-details summary::-webkit-details-marker { display: none; }
.workflow-history-details summary::after { margin-left: auto; color: #a97929; content: "+"; font-size: 1rem; font-weight: 500; }
.workflow-history-details[open] summary { margin: 0; border-bottom: 1px solid #eee7dc; }
.workflow-history-details[open] summary::after { content: "−"; }
.workflow-history-details .workflow-history-fields { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; margin: 0; padding: .7rem; }
.workflow-history-field-change { display: grid; grid-template-columns: 1fr; gap: .18rem; min-height: 3.2rem; align-content: center; padding: .55rem .65rem; border: 1px solid #eee7dc; border-radius: .55rem; background: #fff; }
.workflow-history-field-change strong { color: var(--ft-text-muted); font-size: .65rem; font-weight: 650; }
.workflow-history-field-change span { color: var(--ft-brown-900); font-size: .76rem; font-weight: 700; }
@media (max-width: 767.98px) {
  .workflow-history-date { width: 100%; justify-content: space-between; }
  .workflow-history-details .workflow-history-fields { grid-template-columns: 1fr; }
}

/* Friendly attachment cards */
.workflow-attachments {
  padding: 1.1rem;
  border-color: rgba(52,120,189,.14);
  background: linear-gradient(145deg, rgba(247,251,255,.96), #fff);
}
.workflow-attachments-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}
.workflow-attachments-heading h3 { margin: .18rem 0 0; color: var(--ft-ink-900); font-size: 1rem; }
.workflow-attachments-count {
  display: grid;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .5rem;
  place-items: center;
  border-radius: 999px;
  color: var(--ft-blue-600);
  background: var(--ft-blue-100);
  font-size: .75rem;
  font-weight: 800;
}
.workflow-attachment-list { display: grid; gap: .65rem; }
.workflow-attachment {
  display: grid;
  grid-template-columns: 3rem minmax(0,1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .72rem .8rem;
  border: 1px solid rgba(216,224,232,.9);
  border-radius: .9rem;
  color: inherit;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 18px rgba(42,52,77,.045);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.workflow-attachment:hover {
  border-color: rgba(52,120,189,.38);
  color: inherit;
  box-shadow: 0 12px 28px rgba(42,90,137,.11);
  transform: translateY(-2px);
}
.workflow-attachment-icon {
  position: relative;
  display: grid;
  width: 3rem;
  height: 3.35rem;
  place-items: center;
  border-radius: .7rem;
  color: var(--ft-blue-600);
  background: var(--ft-blue-100);
}
.workflow-attachment-icon svg { width: 1.65rem; height: 1.65rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.workflow-attachment-icon small {
  position: absolute;
  right: -.2rem;
  bottom: .2rem;
  max-width: 3.1rem;
  padding: .08rem .25rem;
  overflow: hidden;
  border-radius: .25rem;
  color: #fff;
  background: var(--ft-blue-600);
  font-size: .48rem;
  font-weight: 850;
  letter-spacing: .03em;
  text-overflow: ellipsis;
}
.workflow-attachment.is-pdf .workflow-attachment-icon { color: #b43c3c; background: #fff0f0; }
.workflow-attachment.is-pdf .workflow-attachment-icon small { background: #b43c3c; }
.workflow-attachment.is-image .workflow-attachment-icon { color: #287b59; background: #edf9f3; }
.workflow-attachment.is-image .workflow-attachment-icon small { background: #287b59; }
.workflow-attachment-info { display: grid; min-width: 0; gap: .18rem; }
.workflow-attachment-info strong { overflow: hidden; color: var(--ft-ink-900); font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.workflow-attachment-info small { color: var(--ft-ink-500); font-size: .68rem; }
.workflow-attachment-action { display: flex; align-items: center; gap: .25rem; color: var(--ft-blue-600); font-size: .72rem; font-weight: 800; }
@media (max-width: 575.98px) {
  .workflow-attachment { grid-template-columns: 2.65rem minmax(0,1fr); }
  .workflow-attachment-icon { width: 2.65rem; height: 3rem; }
  .workflow-attachment-action { display: none; }
}