/* =========================================================
   PixCard Enterprise UI — Onda 2
   =========================================================
   Estilos dos componentes enterprise. Consome design-tokens.css.
   Convenção de classe: .pcx-<componente>__<elemento>--<modifier>
   ========================================================= */

/* ============================================
   COMMAND PALETTE
   ============================================ */
.pcx-cmdk-overlay {
  position: fixed; inset: 0;
  background: var(--surface-overlay);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 12vh;
  z-index: var(--z-command);
  animation: pcx-fade var(--duration-normal) var(--ease-out);
}
.pcx-cmdk {
  width: min(640px, calc(100vw - 32px));
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 68vh;
}
.pcx-cmdk__input-wrap {
  display: flex; align-items: center; gap: var(--space-2_5);
  padding: var(--space-3_5) var(--space-4);
  border-bottom: 1px solid var(--border-default);
}
.pcx-cmdk__input-wrap svg { width: 18px; height: 18px; color: var(--fg-muted); flex: none; }
.pcx-cmdk__input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: var(--text-body-lg); color: var(--fg-strong);
}
.pcx-cmdk__input::placeholder { color: var(--fg-subtle); }
.pcx-cmdk__kbd {
  display: inline-flex; gap: var(--space-1);
  font: var(--text-mono-sm); color: var(--fg-muted);
  background: var(--surface-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}
.pcx-cmdk__list {
  overflow-y: auto;
  padding: var(--space-2) 0;
}
.pcx-cmdk__group {
  padding: var(--space-2) var(--space-4) 0;
}
.pcx-cmdk__group-title {
  font: var(--text-overline);
  letter-spacing: var(--tracking-wider);
  color: var(--fg-muted);
  text-transform: uppercase;
  padding: var(--space-1) 0;
}
.pcx-cmdk__item {
  display: grid; grid-template-columns: 22px 1fr auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2_5) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--fg-default);
  background: transparent; border: 0; width: 100%; text-align: left;
}
.pcx-cmdk__item--active,
.pcx-cmdk__item:hover { background: var(--surface-muted); color: var(--fg-strong); }
.pcx-cmdk__item svg { width: 16px; height: 16px; color: var(--fg-muted); }
.pcx-cmdk__item--active svg { color: var(--brand-press); }
.pcx-cmdk__item-label  { font: var(--text-body-md); color: inherit; }
.pcx-cmdk__item-hint   { font: var(--text-body-xs); color: var(--fg-muted); }
.pcx-cmdk__item-kbd    { font: var(--text-mono-sm); color: var(--fg-muted); }
.pcx-cmdk__empty {
  padding: var(--space-8) var(--space-4);
  text-align: center; color: var(--fg-muted);
  font: var(--text-body-md);
}
.pcx-cmdk__footer {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-default);
  background: var(--surface-subtle);
  font: var(--text-body-xs); color: var(--fg-muted);
}
.pcx-cmdk__footer-shortcut { display: inline-flex; align-items: center; gap: var(--space-1_5); }

/* ============================================
   BULK ACTIONS BAR
   ============================================ */
.pcx-bulk {
  position: sticky; bottom: var(--space-6);
  margin: var(--space-4) auto;
  width: fit-content; max-width: calc(100% - var(--space-8));
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2_5) var(--space-3);
  background: var(--surface-inverse); color: var(--fg-on-inverse);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-sticky);
  animation: pcx-slide-up var(--duration-normal) var(--ease-out);
}
.pcx-bulk__count {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1_5) var(--space-3);
  background: var(--brand); color: var(--on-brand);
  border-radius: var(--radius-pill);
  font: var(--text-title-sm);
}
.pcx-bulk__sep {
  width: 1px; height: 24px;
  background: var(--border-inverse);
}
.pcx-bulk__action {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent; color: var(--fg-on-inverse);
  border: 0; border-radius: var(--radius-md);
  font: var(--text-body-md); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.pcx-bulk__action:hover { background: rgba(255,255,255,0.10); }
.pcx-bulk__action--danger { color: var(--color-danger-300); }
.pcx-bulk__action--danger:hover { background: rgba(192,57,43,0.20); color: #fff; }
.pcx-bulk__action svg { width: 16px; height: 16px; }
.pcx-bulk__clear {
  margin-left: auto;
  background: transparent; color: rgba(255,255,255,0.7);
  border: 0; cursor: pointer; padding: var(--space-1) var(--space-2);
  font: var(--text-body-sm);
}
.pcx-bulk__clear:hover { color: #fff; }

/* ============================================
   SAVED FILTERS
   ============================================ */
.pcx-filters {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap;
}
.pcx-filter-chip {
  display: inline-flex; align-items: center; gap: var(--space-1_5);
  padding: var(--space-1_5) var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font: var(--text-body-sm); color: var(--fg-default);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.pcx-filter-chip:hover { background: var(--surface-muted); }
.pcx-filter-chip--active {
  background: var(--brand-soft); border-color: var(--brand);
  color: var(--color-brand-800);
}
.pcx-filter-chip svg { width: 12px; height: 12px; }
.pcx-filter-chip__count {
  font: var(--text-mono-sm);
  padding: 0 var(--space-1_5);
  background: var(--surface-muted);
  border-radius: var(--radius-pill);
  min-width: 18px; text-align: center;
}
.pcx-filter-chip--active .pcx-filter-chip__count {
  background: rgba(255,255,255,0.6); color: var(--color-brand-800);
}
.pcx-filter-save {
  display: inline-flex; align-items: center; gap: var(--space-1_5);
  padding: var(--space-1_5) var(--space-3);
  background: transparent; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--fg-muted); font: var(--text-body-sm);
  cursor: pointer;
}
.pcx-filter-save:hover { color: var(--fg-strong); border-color: var(--fg-muted); }

/* ============================================
   RETRY BUTTON
   ============================================ */
.pcx-retry {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font: var(--text-body-md); color: var(--fg-strong);
  cursor: pointer;
  position: relative; overflow: hidden;
}
.pcx-retry:disabled { opacity: 0.6; cursor: not-allowed; }
.pcx-retry__icon { width: 16px; height: 16px; }
.pcx-retry__icon--spin { animation: pcx-spin 0.9s linear infinite; }
.pcx-retry__progress {
  position: absolute; left: 0; bottom: 0;
  height: 2px; background: var(--brand);
  transition: width var(--duration-fast) var(--ease-linear);
}
.pcx-retry__attempt {
  font: var(--text-mono-sm); color: var(--fg-muted);
  margin-left: var(--space-1);
}
.pcx-retry__countdown {
  font: var(--text-body-sm); color: var(--fg-muted);
}

/* ============================================
   DIFF VIEWER
   ============================================ */
.pcx-diff {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font: var(--text-mono-sm);
}
.pcx-diff__pane { display: flex; flex-direction: column; min-width: 0; }
.pcx-diff__pane + .pcx-diff__pane { border-left: 1px solid var(--border-default); }
.pcx-diff__head {
  padding: var(--space-2_5) var(--space-3_5);
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-default);
  display: flex; align-items: center; justify-content: space-between;
  font: var(--text-body-sm); color: var(--fg-default);
}
.pcx-diff__version { font: var(--text-mono-md); color: var(--fg-strong); }
.pcx-diff__lines { overflow: auto; max-height: 520px; }
.pcx-diff__line {
  display: grid; grid-template-columns: 40px 14px 1fr;
  gap: var(--space-2);
  padding: 2px var(--space-3_5);
  align-items: baseline;
  white-space: pre;
}
.pcx-diff__line-num { color: var(--fg-subtle); text-align: right; user-select: none; }
.pcx-diff__line-sign { color: var(--fg-subtle); user-select: none; }
.pcx-diff__line-content { color: var(--fg-default); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.pcx-diff__line--add { background: var(--status-success-bg); }
.pcx-diff__line--add .pcx-diff__line-sign { color: var(--status-success-fg); }
.pcx-diff__line--del { background: var(--status-danger-bg); }
.pcx-diff__line--del .pcx-diff__line-sign { color: var(--status-danger-fg); }
.pcx-diff__line--change { background: var(--status-warning-bg); }
.pcx-diff__legend {
  display: flex; gap: var(--space-3);
  padding: var(--space-2) var(--space-3_5);
  border-top: 1px solid var(--border-default);
  background: var(--surface-subtle);
  font: var(--text-body-xs); color: var(--fg-muted);
}

/* ============================================
   FILE PREVIEW (CNAB / TXT)
   ============================================ */
.pcx-file {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pcx-file__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-subtle);
}
.pcx-file__name { font: var(--text-mono-md); color: var(--fg-strong); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pcx-file__meta { font: var(--text-body-xs); color: var(--fg-muted); }
.pcx-file__search {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  min-width: 220px;
}
.pcx-file__search input { border: 0; outline: 0; background: transparent; font: var(--text-body-sm); flex: 1; color: var(--fg-strong); }
.pcx-file__body {
  display: flex; flex-direction: column;
  max-height: 480px; overflow: auto;
  background: var(--surface-card);
}
.pcx-file__line {
  display: grid; grid-template-columns: 56px 1fr;
  gap: var(--space-3);
  padding: 1px var(--space-3);
  font: var(--text-mono-sm);
  align-items: baseline;
  white-space: pre;
}
.pcx-file__line:hover { background: var(--surface-subtle); }
.pcx-file__line-num { color: var(--fg-subtle); text-align: right; user-select: none; }
.pcx-file__line-content { color: var(--fg-default); white-space: pre; }
.pcx-file__line--header { background: var(--surface-subtle); }
.pcx-file__line--trailer { background: var(--surface-subtle); }
.pcx-file__line--match { background: var(--status-warning-bg); }
.pcx-file__line--match .pcx-file__line-content mark { background: var(--color-warning-200); color: var(--fg-strong); padding: 0 2px; border-radius: 2px; }
.pcx-file__line--selected { background: var(--brand-soft); }

.pcx-file__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-default);
  background: var(--surface-subtle);
  font: var(--text-body-xs); color: var(--fg-muted);
}

/* ============================================
   TOAST QUEUE
   ============================================ */
.pcx-toasts {
  position: fixed; right: var(--space-6); bottom: var(--space-6);
  display: flex; flex-direction: column-reverse; gap: var(--space-2);
  z-index: var(--z-toast);
  max-width: 380px;
}
.pcx-toast {
  display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-2_5);
  align-items: flex-start;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--status-info-solid);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3_5);
  box-shadow: var(--shadow-lg);
  animation: pcx-slide-in-right var(--duration-normal) var(--ease-out);
}
.pcx-toast--success { border-left-color: var(--status-success-solid); }
.pcx-toast--info    { border-left-color: var(--status-info-solid); }
.pcx-toast--warning { border-left-color: var(--status-warning-solid); }
.pcx-toast--danger  { border-left-color: var(--status-danger-solid); }
.pcx-toast__icon { width: 20px; height: 20px; flex: none; }
.pcx-toast--success .pcx-toast__icon { color: var(--status-success-solid); }
.pcx-toast--info    .pcx-toast__icon { color: var(--status-info-solid); }
.pcx-toast--warning .pcx-toast__icon { color: var(--status-warning-solid); }
.pcx-toast--danger  .pcx-toast__icon { color: var(--status-danger-solid); }
.pcx-toast__title   { font: var(--text-title-sm); color: var(--fg-strong); }
.pcx-toast__desc    { font: var(--text-body-sm); color: var(--fg-muted); margin-top: 2px; }
.pcx-toast__action  { font: var(--text-body-sm); color: var(--fg-link); background: transparent; border: 0; cursor: pointer; padding: 4px 0; margin-top: var(--space-1); }
.pcx-toast__close   { background: transparent; border: 0; color: var(--fg-muted); cursor: pointer; padding: 2px; }
.pcx-toast__close:hover { color: var(--fg-strong); }

/* ============================================
   SKELETONS
   ============================================ */
.pcx-skel {
  background: linear-gradient(90deg, var(--surface-muted) 0%, var(--surface-emphasis) 50%, var(--surface-muted) 100%);
  background-size: 200% 100%;
  animation: pcx-skel 1.6s linear infinite;
  border-radius: var(--radius-sm);
  display: block;
}
.pcx-skel--line  { height: 12px; }
.pcx-skel--line-lg { height: 16px; }
.pcx-skel--circle { border-radius: var(--radius-pill); }
.pcx-skel--card  { height: 80px; border-radius: var(--radius-lg); }

.pcx-skel-row {
  display: grid; grid-template-columns: 32px 1fr 120px 100px 80px 24px;
  gap: var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-muted);
}
.pcx-skel-table-head {
  display: grid; grid-template-columns: 32px 1fr 120px 100px 80px 24px;
  gap: var(--space-3); align-items: center;
  padding: var(--space-2_5) var(--space-4);
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-default);
}
.pcx-skel-kpi {
  display: grid; gap: var(--space-2);
  padding: var(--space-4); background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
}

/* ============================================
   KEYBOARD SHORTCUTS PANEL
   ============================================ */
.pcx-kbd-panel {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--surface-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
  animation: pcx-fade var(--duration-normal) var(--ease-out);
}
.pcx-kbd-modal {
  width: min(720px, 100%);
  max-height: calc(100vh - 96px);
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pcx-kbd-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
}
.pcx-kbd-modal__title { font: var(--text-title-lg); color: var(--fg-strong); margin: 0; }
.pcx-kbd-modal__close { background: transparent; border: 0; cursor: pointer; color: var(--fg-muted); padding: var(--space-1); }
.pcx-kbd-modal__body { overflow-y: auto; padding: var(--space-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.pcx-kbd-group__title { font: var(--text-overline); letter-spacing: var(--tracking-widest); color: var(--fg-muted); margin: 0 0 var(--space-2); text-transform: uppercase; }
.pcx-kbd-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-muted); font: var(--text-body-sm); }
.pcx-kbd-row:last-child { border-bottom: 0; }
.pcx-kbd-row__label { color: var(--fg-default); }
.pcx-kbd-row__keys { display: inline-flex; gap: var(--space-1); }
.pcx-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 2px 6px;
  background: var(--surface-muted);
  border: 1px solid var(--border-default);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  font: var(--text-mono-sm); color: var(--fg-strong);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes pcx-spin { to { transform: rotate(360deg); } }
@keyframes pcx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pcx-slide-up { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pcx-slide-in-right { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pcx-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }