/* ================================================================
   ABELARDO VILLA MULTIMARCA — COMPONENT LIBRARY v2.0
   ────────────────────────────────────────────────────────────────
   Librería de componentes reutilizables con todos sus estados.
   Importa tokens.css como dependencia.
   ================================================================ */

/* ================================================================
   1. BUTTONS
   ────────────────────────────────────────────────────────────────
   Variantes: primary (rojo), secondary (azul), outline, ghost, danger
   Tamaños:   sm, md (default), lg
   Modificadores: --icon, --loading, --block, --rounded
   ================================================================ */

.ds-btn {
  --_btn-bg: transparent;
  --_btn-color: var(--text-primary);
  --_btn-border: transparent;
  --_btn-shadow: var(--shadow-none);
  --_btn-radius: var(--radius-md);
  --_btn-font-size: var(--text-sm);
  --_btn-padding-x: var(--space-5);
  --_btn-padding-y: var(--space-3);
  --_btn-min-h: var(--touch-target-min);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--_btn-min-h);
  padding: var(--_btn-padding-y) var(--_btn-padding-x);
  background: var(--_btn-bg);
  color: var(--_btn-color);
  border: 1.5px solid var(--_btn-border);
  border-radius: var(--_btn-radius);
  box-shadow: var(--_btn-shadow);
  font-family: var(--font-body);
  font-size: var(--_btn-font-size);
  font-weight: 600;
  line-height: var(--leading-tight);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

.ds-btn:hover {
  transform: translateY(-1px);
}

.ds-btn:active {
  transform: translateY(0);
}

.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* — Primary (Rojo) — */
.ds-btn--primary {
  --_btn-bg: var(--color-primary);
  --_btn-color: var(--text-on-primary);
  --_btn-border: var(--color-primary);
  --_btn-shadow: var(--shadow-primary);
}
.ds-btn--primary:hover {
  --_btn-bg: var(--color-primary-hover);
  --_btn-border: var(--color-primary-hover);
  --_btn-shadow: 0 6px 20px rgba(225, 29, 42, 0.40);
}
.ds-btn--primary:active {
  --_btn-bg: var(--color-primary-active);
  --_btn-border: var(--color-primary-active);
}

/* — Secondary (Azul) — */
.ds-btn--secondary {
  --_btn-bg: var(--color-secondary);
  --_btn-color: var(--text-on-secondary);
  --_btn-border: var(--color-secondary);
  --_btn-shadow: var(--shadow-secondary);
}
.ds-btn--secondary:hover {
  --_btn-bg: var(--color-secondary-hover);
  --_btn-border: var(--color-secondary-hover);
  --_btn-shadow: 0 6px 20px rgba(20, 121, 190, 0.40);
}
.ds-btn--secondary:active {
  --_btn-bg: var(--blue-700);
  --_btn-border: var(--blue-700);
}

/* — Outline — */
.ds-btn--outline {
  --_btn-bg: transparent;
  --_btn-color: var(--color-secondary);
  --_btn-border: var(--color-secondary);
}
.ds-btn--outline:hover {
  --_btn-bg: var(--color-secondary-subtle);
  --_btn-color: var(--color-secondary-hover);
  --_btn-border: var(--color-secondary-hover);
}
.ds-btn--outline:active {
  --_btn-bg: rgba(20, 121, 190, 0.18);
}

/* — Ghost — */
.ds-btn--ghost {
  --_btn-bg: transparent;
  --_btn-color: var(--text-secondary);
  --_btn-border: transparent;
}
.ds-btn--ghost:hover {
  --_btn-bg: var(--surface-sunken);
  --_btn-color: var(--text-primary);
}
.ds-btn--ghost:active {
  --_btn-bg: var(--neutral-200);
}

/* — Danger — */
.ds-btn--danger {
  --_btn-bg: var(--color-danger);
  --_btn-color: var(--neutral-0);
  --_btn-border: var(--color-danger);
  --_btn-shadow: 0 4px 14px rgba(239, 68, 68, 0.30);
}
.ds-btn--danger:hover {
  --_btn-bg: #DC2626;
  --_btn-border: #DC2626;
  --_btn-shadow: 0 6px 20px rgba(239, 68, 68, 0.40);
}
.ds-btn--danger:active {
  --_btn-bg: #B91C1C;
  --_btn-border: #B91C1C;
}

/* — Sizes — */
.ds-btn--sm {
  --_btn-font-size: var(--text-xs);
  --_btn-padding-x: var(--space-3);
  --_btn-padding-y: var(--space-1-5);
  --_btn-min-h: 32px;
}

.ds-btn--lg {
  --_btn-font-size: var(--text-base);
  --_btn-padding-x: var(--space-8);
  --_btn-padding-y: var(--space-4);
  --_btn-min-h: 52px;
}

/* — Modifiers — */
.ds-btn--block { width: 100%; }
.ds-btn--rounded { --_btn-radius: var(--radius-full); }

.ds-btn--icon-only {
  --_btn-padding-x: 0;
  --_btn-padding-y: 0;
  width: var(--_btn-min-h);
  aspect-ratio: 1;
}

/* — Loading state — */
.ds-btn--loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}

.ds-btn--loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ds-spin 0.6s linear infinite;
}

/* Loading spinner for non-white buttons */
.ds-btn--outline.ds-btn--loading::after,
.ds-btn--ghost.ds-btn--loading::after {
  border-color: rgba(20, 121, 190, 0.2);
  border-top-color: var(--color-secondary);
}

/* Button icon sizing */
.ds-btn svg,
.ds-btn .ds-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}


/* ================================================================
   2. FORM CONTROLS
   ────────────────────────────────────────────────────────────────
   Input, Select, Textarea, Checkbox, Switch, Radio
   Cada uno con label, texto de ayuda, y estado de error
   ================================================================ */

/* — Field wrapper — */
.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

/* — Label — */
.ds-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

.ds-label--required::after {
  content: ' *';
  color: var(--color-danger);
  font-weight: 700;
}

/* — Help / Error text — */
.ds-field__help {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
}

.ds-field__error {
  font-size: var(--text-xs);
  color: var(--color-danger);
  font-weight: 500;
  line-height: var(--leading-normal);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ds-field__error::before {
  content: '⚠';
  font-size: var(--text-sm);
}

/* — Input / Select / Textarea base — */
.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  transition: var(--transition-fast);
  appearance: none;
}

.ds-input::placeholder,
.ds-textarea::placeholder {
  color: var(--text-tertiary);
}

.ds-input:hover,
.ds-select:hover,
.ds-textarea:hover {
  border-color: var(--border-strong);
}

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(20, 121, 190, 0.15);
}

/* Error state */
.ds-input--error,
.ds-select--error,
.ds-textarea--error {
  border-color: var(--color-danger);
}
.ds-input--error:focus,
.ds-select--error:focus,
.ds-textarea--error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Select arrow */
.ds-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%231479BE' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

/* Textarea */
.ds-textarea {
  resize: vertical;
  min-height: 120px;
}

/* — Checkbox — */
.ds-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  min-height: var(--touch-target-min);
  padding: var(--space-1) 0;
  user-select: none;
}

.ds-checkbox__input {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
  display: grid;
  place-content: center;
}

.ds-checkbox__input::before {
  content: '';
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: var(--duration-fast) var(--ease-spring);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  background: var(--neutral-0);
}

.ds-checkbox__input:checked {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.ds-checkbox__input:checked::before {
  transform: scale(1);
}

.ds-checkbox__input:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(20, 121, 190, 0.25);
}

.ds-checkbox__label {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

/* — Switch / Toggle — */
.ds-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  min-height: var(--touch-target-min);
  user-select: none;
}

.ds-switch__input {
  appearance: none;
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--neutral-300);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.ds-switch__input::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--neutral-0);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: var(--duration-fast) var(--ease-spring);
}

.ds-switch__input:checked {
  background: var(--color-secondary);
}

.ds-switch__input:checked::before {
  transform: translateX(20px);
}

.ds-switch__input:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(20, 121, 190, 0.25);
}

.ds-switch__label {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* — Radio — */
.ds-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  min-height: var(--touch-target-min);
  user-select: none;
}

.ds-radio__input {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-default);
  border-radius: 50%;
  background: var(--surface-card);
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
  display: grid;
  place-content: center;
}

.ds-radio__input::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-secondary);
  transform: scale(0);
  transition: var(--duration-fast) var(--ease-spring);
}

.ds-radio__input:checked {
  border-color: var(--color-secondary);
}

.ds-radio__input:checked::before {
  transform: scale(1);
}

.ds-radio__input:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(20, 121, 190, 0.25);
}

.ds-radio__label {
  font-size: var(--text-sm);
  color: var(--text-primary);
}


/* ================================================================
   3. CHIPS / BADGES
   ════════════════════════════════════════════════════════════════ */

.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: var(--leading-normal);
  border: 1px solid transparent;
}

/* Dot indicator */
.ds-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Variantes */
.ds-chip--usado {
  background: rgba(100, 116, 139, 0.12);
  color: var(--neutral-600);
  border-color: rgba(100, 116, 139, 0.25);
}
.ds-chip--usado .ds-chip__dot { background: var(--neutral-500); }

.ds-chip--0km {
  background: var(--color-success-bg);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.30);
}
.ds-chip--0km .ds-chip__dot { background: var(--color-success); }

.ds-chip--nuevo-ingreso {
  background: var(--color-info-bg);
  color: var(--blue-600);
  border-color: rgba(20, 121, 190, 0.25);
}
.ds-chip--nuevo-ingreso .ds-chip__dot { background: var(--color-secondary); }

.ds-chip--financiable {
  background: rgba(139, 92, 246, 0.10);
  color: #7C3AED;
  border-color: rgba(139, 92, 246, 0.25);
}
.ds-chip--financiable .ds-chip__dot { background: #8B5CF6; }

.ds-chip--reservado {
  background: var(--color-warning-bg);
  color: #B45309;
  border-color: rgba(245, 158, 11, 0.30);
}
.ds-chip--reservado .ds-chip__dot { background: var(--color-warning); }

.ds-chip--vendido {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-color: rgba(239, 68, 68, 0.25);
}
.ds-chip--vendido .ds-chip__dot { background: var(--color-danger); }

.ds-chip--disponible {
  background: var(--color-success-bg);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.30);
}
.ds-chip--disponible .ds-chip__dot { background: var(--color-success); }


/* ================================================================
   4. CARD BASE & CAR CARD
   ════════════════════════════════════════════════════════════════ */

.ds-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: var(--transition-fast);
}

.ds-card:hover {
  box-shadow: var(--shadow-card-hover);
}

.ds-card__header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.ds-card__body {
  padding: var(--space-5) var(--space-6);
}

.ds-card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

/* — Car Card — */
.ds-car-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-fast);
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.ds-car-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-card-hover);
}

.ds-car-card:hover .ds-car-card__img img {
  transform: scale(1.04);
}

.ds-car-card__img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--surface-sunken);
}

.ds-car-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease-standard);
}

.ds-car-card__badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  z-index: 2;
}

.ds-car-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ds-car-card__brand {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-1);
}

.ds-car-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}

.ds-car-card__version {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.ds-car-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.ds-car-card__spec {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.ds-car-card__spec svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-secondary);
  flex-shrink: 0;
}

.ds-car-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  gap: var(--space-4);
}

.ds-car-card__price-label {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
  font-weight: 600;
}

.ds-car-card__price {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.ds-car-card__price .currency {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 2px;
}


/* ================================================================
   5. MODAL / DRAWER
   ════════════════════════════════════════════════════════════════ */

.ds-overlay {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard),
              visibility var(--duration-base) var(--ease-standard);
}
.ds-overlay.is-active { opacity: 1; visibility: visible; }

.ds-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: var(--z-modal);
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  padding: var(--space-8);
  width: 90%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-spring),
              visibility var(--duration-base) var(--ease-standard);
}
.ds-modal.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.ds-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.ds-modal__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
}

.ds-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
  font-size: var(--text-xl);
  line-height: 1;
}
.ds-modal__close:hover { background: var(--surface-sunken); color: var(--text-primary); }

.ds-modal__body {
  margin-bottom: var(--space-6);
}

.ds-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* Drawer */
.ds-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-modal);
  background: var(--surface-card);
  box-shadow: var(--shadow-2xl);
  width: 90%;
  max-width: 420px;
  height: 100vh;
  overflow-y: auto;
  padding: var(--space-8);
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--duration-slow) var(--ease-decelerate),
              opacity var(--duration-base) var(--ease-standard),
              visibility var(--duration-base) var(--ease-standard);
}
.ds-drawer.is-active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}


/* ================================================================
   6. TABS
   ════════════════════════════════════════════════════════════════ */

.ds-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-default);
  gap: 0;
  overflow-x: auto;
}

.ds-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  min-height: var(--touch-target-min);
}

.ds-tabs__tab:hover {
  color: var(--text-primary);
  background: var(--surface-sunken);
}

.ds-tabs__tab.is-active,
.ds-tabs__tab[aria-selected="true"] {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
}

.ds-tabs__panel {
  padding: var(--space-6) 0;
}

.ds-tabs__panel[hidden] {
  display: none;
}


/* ================================================================
   7. BREADCRUMB
   ════════════════════════════════════════════════════════════════ */

.ds-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  list-style: none;
  padding: 0;
  margin: 0;
}

.ds-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ds-breadcrumb__item + .ds-breadcrumb__item::before {
  content: '/';
  color: var(--text-tertiary);
  font-weight: 400;
}

.ds-breadcrumb__link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-fast);
}

.ds-breadcrumb__link:hover {
  color: var(--color-secondary);
}

.ds-breadcrumb__current {
  color: var(--text-primary);
  font-weight: 600;
}


/* ================================================================
   8. PAGINATION
   ════════════════════════════════════════════════════════════════ */

.ds-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  flex-wrap: wrap;
}

.ds-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-fast);
}

.ds-pagination__item:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.ds-pagination__item.is-active {
  background: var(--color-secondary);
  color: var(--neutral-0);
  border-color: var(--color-secondary);
}

.ds-pagination__item:disabled,
.ds-pagination__item.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.ds-pagination__ellipsis {
  color: var(--text-tertiary);
  padding: 0 var(--space-2);
  cursor: default;
}


/* ================================================================
   9. TOAST
   ════════════════════════════════════════════════════════════════ */

.ds-toast-container {
  position: fixed;
  top: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

.ds-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  border-left: 4px solid var(--color-info);
  min-width: 320px;
  max-width: 420px;
  pointer-events: auto;
  animation: ds-toast-in var(--duration-base) var(--ease-spring);
}

.ds-toast--success { border-left-color: var(--color-success); }
.ds-toast--warning { border-left-color: var(--color-warning); }
.ds-toast--danger  { border-left-color: var(--color-danger); }

.ds-toast__icon {
  flex-shrink: 0;
  font-size: var(--text-xl);
}

.ds-toast__content {
  flex: 1;
}

.ds-toast__title {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-0-5);
}

.ds-toast__message {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.ds-toast__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: var(--space-1);
  font-size: var(--text-lg);
  line-height: 1;
  transition: var(--transition-fast);
}
.ds-toast__close:hover { color: var(--text-primary); }

@keyframes ds-toast-in {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ================================================================
   10. SKELETON LOADING
   ════════════════════════════════════════════════════════════════ */

.ds-skeleton {
  background: linear-gradient(
    90deg,
    var(--neutral-150) 25%,
    var(--neutral-200) 50%,
    var(--neutral-150) 75%
  );
  background-size: 200% 100%;
  animation: ds-shimmer 1.5s infinite ease-in-out;
  border-radius: var(--radius-sm);
}

.ds-skeleton--text {
  height: 1em;
  width: 100%;
  margin-bottom: var(--space-2);
}

.ds-skeleton--heading {
  height: 1.5em;
  width: 60%;
  margin-bottom: var(--space-3);
}

.ds-skeleton--avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.ds-skeleton--image {
  aspect-ratio: 4/3;
  width: 100%;
  border-radius: var(--radius-md);
}

.ds-skeleton--button {
  height: var(--touch-target-min);
  width: 120px;
  border-radius: var(--radius-md);
}


/* ================================================================
   11. EMPTY STATE
   ════════════════════════════════════════════════════════════════ */

.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-8);
  max-width: 420px;
  margin: 0 auto;
}

.ds-empty__icon {
  font-size: 3.5rem;
  margin-bottom: var(--space-4);
  color: var(--text-tertiary);
  opacity: 0.6;
}

.ds-empty__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.ds-empty__description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}


/* ================================================================
   12. ANIMATIONS (shared keyframes)
   ════════════════════════════════════════════════════════════════ */

@keyframes ds-spin {
  to { transform: rotate(360deg); }
}

@keyframes ds-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes ds-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ds-fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ds-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}