/* ============================================================
   Chatkitect Components
   Clases reutilizables namespaceadas con .ck-*
   No interfieren con clases existentes de los paneles.
   ============================================================ */

/* ============ BOTONES ============ */
.ck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ck-space-2);
  font-family: inherit;
  font-size: var(--ck-text-md);
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: var(--ck-radius-md);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1.4;
  user-select: none;
}
.ck-btn:focus-visible { outline: 2px solid var(--ck-border-focus); outline-offset: 2px; }
.ck-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ck-btn-primary { background: var(--ck-accent); color: var(--ck-text-on-accent); }
.ck-btn-primary:hover { background: var(--ck-accent-hover); }
.ck-btn-primary:active { background: var(--ck-accent-pressed); }

.ck-btn-secondary { background: var(--ck-bg-surface); color: var(--ck-text-primary); border-color: var(--ck-border-default); }
.ck-btn-secondary:hover { background: var(--ck-bg-hover); }

.ck-btn-ghost { background: transparent; color: var(--ck-text-primary); }
.ck-btn-ghost:hover { background: var(--ck-bg-hover); }

.ck-btn-danger { background: var(--ck-danger); color: white; }
.ck-btn-danger:hover { filter: brightness(1.05); }

.ck-btn-sm { padding: 4px 10px; font-size: var(--ck-text-sm); }
.ck-btn-lg { padding: 8px 18px; font-size: var(--ck-text-lg); }

.ck-icon-btn {
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: var(--ck-radius-sm);
  color: var(--ck-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background .15s, color .15s;
}
.ck-icon-btn:hover { background: var(--ck-bg-hover); color: var(--ck-text-primary); }

/* ============ CARDS ============ */
.ck-card {
  background: var(--ck-bg-surface);
  color: var(--ck-text-primary);
  border: 1px solid var(--ck-border-subtle);
  border-radius: var(--ck-radius-lg);
  padding: var(--ck-space-5);
}
.ck-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ck-space-3);
}
.ck-card-title { font-size: var(--ck-text-lg); font-weight: 600; }
.ck-card-subtitle { font-size: var(--ck-text-sm); color: var(--ck-text-secondary); }

/* ============ STATS ============ */
.ck-stat {
  background: var(--ck-bg-surface);
  border: 1px solid var(--ck-border-subtle);
  border-radius: var(--ck-radius-lg);
  padding: var(--ck-space-4) var(--ck-space-5);
}
.ck-stat-label { font-size: var(--ck-text-sm); color: var(--ck-text-secondary); display: flex; align-items: center; gap: var(--ck-space-2); margin-bottom: var(--ck-space-2); }
.ck-stat-label .ck-icon { color: var(--ck-accent); }
.ck-stat-value { font-size: var(--ck-text-3xl); font-weight: 600; line-height: 1; color: var(--ck-text-primary); }
.ck-stat-trend { font-size: var(--ck-text-sm); margin-top: var(--ck-space-2); display: flex; align-items: center; gap: 4px; }
.ck-stat-trend.up { color: var(--ck-success); }
.ck-stat-trend.down { color: var(--ck-danger); }

/* ============ FIELDS ============ */
.ck-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--ck-space-3); }
.ck-label { font-size: var(--ck-text-sm); font-weight: 600; color: var(--ck-text-primary); }
.ck-help { font-size: var(--ck-text-xs); color: var(--ck-text-tertiary); }
.ck-input, .ck-select, .ck-textarea {
  background: var(--ck-bg-surface);
  color: var(--ck-text-primary);
  border: 1px solid var(--ck-border-default);
  border-radius: var(--ck-radius-md);
  padding: 6px 10px;
  font-family: inherit;
  font-size: var(--ck-text-md);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.ck-input:focus, .ck-select:focus, .ck-textarea:focus {
  outline: 0;
  border-color: var(--ck-border-focus);
  box-shadow: 0 0 0 1px var(--ck-border-focus);
}
.ck-input::placeholder { color: var(--ck-text-tertiary); }

/* ============ BADGES ============ */
.ck-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--ck-radius-pill);
  font-size: var(--ck-text-xs);
  font-weight: 600;
  line-height: 1.5;
}
.ck-badge-success { background: var(--ck-success-soft); color: var(--ck-success); }
.ck-badge-warning { background: var(--ck-warning-soft); color: var(--ck-warning); }
.ck-badge-danger  { background: var(--ck-danger-soft);  color: var(--ck-danger); }
.ck-badge-info    { background: var(--ck-info-soft);    color: var(--ck-info); }
.ck-badge-neutral { background: var(--ck-bg-surface-alt); color: var(--ck-text-secondary); }
.ck-badge-accent  { background: var(--ck-accent-soft);  color: var(--ck-accent); }

/* ============ TABLA ============ */
.ck-table-wrap {
  background: var(--ck-bg-surface);
  border: 1px solid var(--ck-border-subtle);
  border-radius: var(--ck-radius-lg);
  overflow: hidden;
}
.ck-table { width: 100%; border-collapse: collapse; font-size: var(--ck-text-md); }
.ck-table thead { background: var(--ck-bg-surface-alt); }
.ck-table th {
  text-align: left;
  padding: 10px var(--ck-space-4);
  font-size: var(--ck-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ck-text-tertiary);
  border-bottom: 1px solid var(--ck-border-subtle);
}
.ck-table td {
  padding: 10px var(--ck-space-4);
  border-bottom: 1px solid var(--ck-border-subtle);
  color: var(--ck-text-primary);
}
.ck-table tr:last-child td { border-bottom: 0; }
.ck-table tbody tr:hover { background: var(--ck-bg-surface-alt); }
.ck-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ck-accent-soft);
  color: var(--ck-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--ck-text-xs); font-weight: 600;
  flex-shrink: 0;
}

/* ============ TABS ============ */
.ck-tabs {
  display: flex;
  border-bottom: 1px solid var(--ck-border-subtle);
  margin-bottom: var(--ck-space-4);
  gap: 4px;
}
.ck-tab {
  padding: 8px 14px;
  font-size: var(--ck-text-md);
  color: var(--ck-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
}
.ck-tab:hover { color: var(--ck-text-primary); }
.ck-tab.active { color: var(--ck-accent); border-bottom-color: var(--ck-accent); font-weight: 600; }

/* ============ TOAST ============ */
.ck-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--ck-space-3);
  padding: var(--ck-space-3) var(--ck-space-4);
  border-radius: var(--ck-radius-md);
  border: 1px solid;
  max-width: 480px;
}
.ck-toast-success { background: var(--ck-success-soft); border-color: var(--ck-success); }
.ck-toast-success .ck-icon { color: var(--ck-success); }
.ck-toast-warning { background: var(--ck-warning-soft); border-color: var(--ck-warning); }
.ck-toast-warning .ck-icon { color: var(--ck-warning); }
.ck-toast-danger  { background: var(--ck-danger-soft);  border-color: var(--ck-danger); }
.ck-toast-danger  .ck-icon { color: var(--ck-danger); }
.ck-toast-info    { background: var(--ck-info-soft);    border-color: var(--ck-info); }
.ck-toast-info    .ck-icon { color: var(--ck-info); }
.ck-toast-body { flex: 1; }
.ck-toast-title { font-weight: 600; font-size: var(--ck-text-md); margin-bottom: 2px; color: var(--ck-text-primary); }
.ck-toast-msg   { font-size: var(--ck-text-sm); color: var(--ck-text-secondary); }

/* ============ MODAL ============ */
.ck-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.ck-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.ck-modal {
  background: var(--ck-bg-surface);
  color: var(--ck-text-primary);
  border: 1px solid var(--ck-border-subtle);
  border-radius: var(--ck-radius-xl);
  padding: var(--ck-space-5);
  width: 90%;
  max-width: 480px;
  box-shadow: var(--ck-shadow-16);
}
.ck-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ck-space-3); }
.ck-modal-title  { font-size: var(--ck-text-xl); font-weight: 600; }
.ck-modal-footer { display: flex; gap: var(--ck-space-2); justify-content: flex-end; margin-top: var(--ck-space-4); }

/* ============ SEGMENTED (theme switcher) ============ */
.ck-segmented {
  display: inline-flex;
  background: var(--ck-bg-surface-alt);
  border-radius: var(--ck-radius-md);
  padding: 2px;
  gap: 2px;
}
.ck-segmented button {
  background: transparent;
  border: 0;
  padding: 6px 10px;
  border-radius: var(--ck-radius-sm);
  color: var(--ck-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.ck-segmented button:hover { color: var(--ck-text-primary); }
.ck-segmented button.active {
  background: var(--ck-bg-surface);
  color: var(--ck-accent);
  box-shadow: var(--ck-shadow-2);
}