/* ============================================================
   TeamNotify Inventario — Design System
   Moderno, accesible, responsivo, tema claro/oscuro
   ============================================================ */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
  /* Paleta principal */
  --tn-primary:        #4F6EF7;
  --tn-primary-hover:  #3B56D9;
  --tn-primary-light:  #EEF1FE;
  --tn-primary-dark:   #2D3FB5;

  /* Semánticos */
  --tn-success:        #22C55E;
  --tn-success-light:  #DCFCE7;
  --tn-warning:        #F59E0B;
  --tn-warning-light:  #FEF3C7;
  --tn-danger:         #EF4444;
  --tn-danger-light:   #FEE2E2;
  --tn-info:           #06B6D4;
  --tn-info-light:     #CFFAFE;

  /* Neutros */
  --tn-gray-50:        #F9FAFB;
  --tn-gray-100:       #F3F4F6;
  --tn-gray-200:       #E5E7EB;
  --tn-gray-300:       #D1D5DB;
  --tn-gray-400:       #9CA3AF;
  --tn-gray-500:       #6B7280;
  --tn-gray-600:       #4B5563;
  --tn-gray-700:       #374151;
  --tn-gray-800:       #1F2937;
  --tn-gray-900:       #111827;

  /* Superficies */
  --tn-bg:             #F9FAFB;
  --tn-surface:        #FFFFFF;
  --tn-surface-2:      #F3F4F6;
  --tn-border:         #E5E7EB;
  --tn-border-focus:   #4F6EF7;

  /* Texto */
  --tn-text:           #111827;
  --tn-text-secondary: #6B7280;
  --tn-text-disabled:  #9CA3AF;
  --tn-text-inverse:   #FFFFFF;

  /* Tipografía */
  --tn-font:           'Inter', 'Segoe UI', system-ui, sans-serif;
  --tn-font-mono:      'JetBrains Mono', 'Fira Code', monospace;
  --tn-text-xs:        0.75rem;
  --tn-text-sm:        0.875rem;
  --tn-text-base:      1rem;
  --tn-text-lg:        1.125rem;
  --tn-text-xl:        1.25rem;
  --tn-text-2xl:       1.5rem;
  --tn-text-3xl:       1.875rem;

  /* Espaciado */
  --tn-space-1:        0.25rem;
  --tn-space-2:        0.5rem;
  --tn-space-3:        0.75rem;
  --tn-space-4:        1rem;
  --tn-space-5:        1.25rem;
  --tn-space-6:        1.5rem;
  --tn-space-8:        2rem;
  --tn-space-10:       2.5rem;
  --tn-space-12:       3rem;

  /* Bordes */
  --tn-radius-sm:      0.375rem;
  --tn-radius:         0.5rem;
  --tn-radius-lg:      0.75rem;
  --tn-radius-xl:      1rem;
  --tn-radius-full:    9999px;

  /* Sombras */
  --tn-shadow-sm:      0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tn-shadow:         0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tn-shadow-md:      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tn-shadow-lg:      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tn-shadow-xl:      0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Transiciones */
  --tn-transition:     150ms cubic-bezier(0.4, 0, 0.2, 1);
  --tn-transition-md:  250ms cubic-bezier(0.4, 0, 0.2, 1);
  --tn-transition-lg:  350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  --tn-z-dropdown:     100;
  --tn-z-modal:        200;
  --tn-z-toast:        300;
  --tn-z-tooltip:      400;
}

/* ── Tema Oscuro ────────────────────────────────────────────── */
[data-theme="dark"], .tn-dark {
  --tn-bg:             #0F172A;
  --tn-surface:        #1E293B;
  --tn-surface-2:      #334155;
  --tn-border:         #334155;
  --tn-border-focus:   #6B8EFF;
  --tn-text:           #F1F5F9;
  --tn-text-secondary: #94A3B8;
  --tn-text-disabled:  #475569;
  --tn-primary:        #6B8EFF;
  --tn-primary-hover:  #8BA4FF;
  --tn-primary-light:  #1E2D5A;
  --tn-gray-50:        #1E293B;
  --tn-gray-100:       #334155;
  --tn-gray-200:       #475569;
  --tn-shadow-sm:      0 1px 2px 0 rgb(0 0 0 / 0.3);
  --tn-shadow:         0 1px 3px 0 rgb(0 0 0 / 0.4);
  --tn-shadow-md:      0 4px 6px -1px rgb(0 0 0 / 0.4);
  --tn-shadow-lg:      0 10px 15px -3px rgb(0 0 0 / 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tn-bg:             #0F172A;
    --tn-surface:        #1E293B;
    --tn-surface-2:      #334155;
    --tn-border:         #334155;
    --tn-text:           #F1F5F9;
    --tn-text-secondary: #94A3B8;
    --tn-primary:        #6B8EFF;
    --tn-primary-light:  #1E2D5A;
  }
}

/* ── Reset base ─────────────────────────────────────────────── */
.tn-inventario * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.tn-inventario {
  font-family: var(--tn-font);
  font-size: var(--tn-text-base);
  color: var(--tn-text);
  background: var(--tn-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Card / Panel ───────────────────────────────────────────── */
.tn-card {
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--tn-transition);
}

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

.tn-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tn-space-4) var(--tn-space-6);
  border-bottom: 1px solid var(--tn-border);
  background: var(--tn-surface);
  gap: var(--tn-space-3);
}

.tn-card-title {
  font-size: var(--tn-text-lg);
  font-weight: 600;
  color: var(--tn-text);
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
}

.tn-card-title-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--tn-primary);
}

.tn-card-body {
  padding: var(--tn-space-6);
}

.tn-card-footer {
  padding: var(--tn-space-4) var(--tn-space-6);
  border-top: 1px solid var(--tn-border);
  background: var(--tn-gray-50);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-3);
}

/* ── Botones ────────────────────────────────────────────────── */
.tn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tn-space-2);
  padding: var(--tn-space-2) var(--tn-space-4);
  font-family: var(--tn-font);
  font-size: var(--tn-text-sm);
  font-weight: 500;
  border-radius: var(--tn-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--tn-transition);
  white-space: nowrap;
  text-decoration: none;
  outline: none;
  position: relative;
  overflow: hidden;
}

.tn-btn:focus-visible {
  outline: 2px solid var(--tn-border-focus);
  outline-offset: 2px;
}

.tn-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.tn-btn-primary {
  background: var(--tn-primary);
  color: var(--tn-text-inverse);
  border-color: var(--tn-primary);
}
.tn-btn-primary:hover { background: var(--tn-primary-hover); border-color: var(--tn-primary-hover); transform: translateY(-1px); box-shadow: var(--tn-shadow-md); }
.tn-btn-primary:active { transform: translateY(0); box-shadow: var(--tn-shadow-sm); }

.tn-btn-secondary {
  background: var(--tn-surface);
  color: var(--tn-text);
  border-color: var(--tn-border);
}
.tn-btn-secondary:hover { background: var(--tn-gray-100); border-color: var(--tn-gray-300); }

.tn-btn-danger {
  background: var(--tn-danger);
  color: white;
  border-color: var(--tn-danger);
}
.tn-btn-danger:hover { background: #DC2626; transform: translateY(-1px); box-shadow: var(--tn-shadow-md); }

.tn-btn-success {
  background: var(--tn-success);
  color: white;
  border-color: var(--tn-success);
}
.tn-btn-success:hover { background: #16A34A; transform: translateY(-1px); }

.tn-btn-warning {
  background: var(--tn-warning);
  color: white;
  border-color: var(--tn-warning);
}
.tn-btn-warning:hover { background: #D97706; }

.tn-btn-ghost {
  background: transparent;
  color: var(--tn-text-secondary);
  border-color: transparent;
}
.tn-btn-ghost:hover { background: var(--tn-gray-100); color: var(--tn-text); }

.tn-btn-icon {
  padding: var(--tn-space-2);
  border-radius: var(--tn-radius);
  width: 2rem;
  height: 2rem;
}

.tn-btn-sm {
  padding: var(--tn-space-1) var(--tn-space-3);
  font-size: var(--tn-text-xs);
  height: 1.75rem;
}

.tn-btn-lg {
  padding: var(--tn-space-3) var(--tn-space-6);
  font-size: var(--tn-text-base);
  height: 2.75rem;
}

/* Ripple effect */
.tn-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  transition: opacity var(--tn-transition);
  border-radius: inherit;
}
.tn-btn:active::after { opacity: 0.15; }

/* ── Inputs / Forms ─────────────────────────────────────────── */
.tn-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-1);
  margin-bottom: var(--tn-space-4);
}

.tn-label {
  font-size: var(--tn-text-sm);
  font-weight: 500;
  color: var(--tn-text);
}

.tn-label-required::after {
  content: ' *';
  color: var(--tn-danger);
}

.tn-input,
.tn-select,
.tn-textarea {
  width: 100%;
  padding: var(--tn-space-2) var(--tn-space-3);
  font-family: var(--tn-font);
  font-size: var(--tn-text-sm);
  color: var(--tn-text);
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius);
  transition: border-color var(--tn-transition), box-shadow var(--tn-transition);
  outline: none;
  height: 2.25rem;
}

.tn-textarea { height: auto; min-height: 5rem; resize: vertical; }

.tn-input:focus,
.tn-select:focus,
.tn-textarea:focus {
  border-color: var(--tn-border-focus);
  box-shadow: 0 0 0 3px rgb(79 110 247 / 0.15);
}

.tn-input:disabled,
.tn-select:disabled,
.tn-textarea:disabled {
  background: var(--tn-gray-100);
  color: var(--tn-text-disabled);
  cursor: not-allowed;
}

.tn-input-error { border-color: var(--tn-danger) !important; }
.tn-input-error:focus { box-shadow: 0 0 0 3px rgb(239 68 68 / 0.15) !important; }

.tn-field-error {
  font-size: var(--tn-text-xs);
  color: var(--tn-danger);
  display: flex;
  align-items: center;
  gap: var(--tn-space-1);
  margin-top: var(--tn-space-1);
}

.tn-input-group {
  display: flex;
  align-items: stretch;
}

.tn-input-group .tn-input {
  border-radius: var(--tn-radius) 0 0 var(--tn-radius);
  flex: 1;
}

.tn-input-group-addon {
  display: flex;
  align-items: center;
  padding: 0 var(--tn-space-3);
  background: var(--tn-gray-100);
  border: 1px solid var(--tn-border);
  border-left: none;
  border-radius: 0 var(--tn-radius) var(--tn-radius) 0;
  font-size: var(--tn-text-sm);
  color: var(--tn-text-secondary);
  white-space: nowrap;
}

/* ── Tabla ──────────────────────────────────────────────────── */
.tn-table-wrapper {
  overflow-x: auto;
  border-radius: var(--tn-radius-lg);
  border: 1px solid var(--tn-border);
}

.tn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tn-text-sm);
}

.tn-table thead {
  background: var(--tn-gray-50);
  position: sticky;
  top: 0;
  z-index: 1;
}

.tn-table th {
  padding: var(--tn-space-3) var(--tn-space-4);
  text-align: left;
  font-weight: 600;
  font-size: var(--tn-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tn-text-secondary);
  border-bottom: 1px solid var(--tn-border);
  white-space: nowrap;
  user-select: none;
}

.tn-table th.sortable {
  cursor: pointer;
  transition: color var(--tn-transition);
}
.tn-table th.sortable:hover { color: var(--tn-primary); }
.tn-table th.sorted { color: var(--tn-primary); }

.tn-sort-icon {
  display: inline-flex;
  flex-direction: column;
  margin-left: var(--tn-space-1);
  opacity: 0.4;
  transition: opacity var(--tn-transition);
}
.tn-table th.sorted .tn-sort-icon { opacity: 1; }

.tn-table td {
  padding: var(--tn-space-3) var(--tn-space-4);
  border-bottom: 1px solid var(--tn-border);
  color: var(--tn-text);
  vertical-align: middle;
}

.tn-table tbody tr {
  transition: background var(--tn-transition);
}

.tn-table tbody tr:hover {
  background: var(--tn-primary-light);
}

.tn-table tbody tr:last-child td { border-bottom: none; }

.tn-table tbody tr.selected {
  background: var(--tn-primary-light);
  border-left: 3px solid var(--tn-primary);
}

/* Compact view */
.tn-table.compact th,
.tn-table.compact td {
  padding: var(--tn-space-2) var(--tn-space-3);
}

/* ── Badges / Pills ─────────────────────────────────────────── */
.tn-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-1);
  padding: 0.125rem var(--tn-space-2);
  border-radius: var(--tn-radius-full);
  font-size: var(--tn-text-xs);
  font-weight: 500;
  white-space: nowrap;
}

.tn-badge-primary   { background: var(--tn-primary-light); color: var(--tn-primary-dark); }
.tn-badge-success   { background: var(--tn-success-light); color: #15803D; }
.tn-badge-warning   { background: var(--tn-warning-light); color: #92400E; }
.tn-badge-danger    { background: var(--tn-danger-light);  color: #991B1B; }
.tn-badge-info      { background: var(--tn-info-light);    color: #0E7490; }
.tn-badge-neutral   { background: var(--tn-gray-100);      color: var(--tn-gray-600); }

.tn-badge-dot::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* ── Paginación ─────────────────────────────────────────────── */
.tn-pagination {
  display: flex;
  align-items: center;
  gap: var(--tn-space-1);
  flex-wrap: wrap;
}

.tn-pagination-info {
  font-size: var(--tn-text-sm);
  color: var(--tn-text-secondary);
  margin-right: var(--tn-space-3);
}

.tn-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--tn-radius);
  border: 1px solid var(--tn-border);
  background: var(--tn-surface);
  color: var(--tn-text);
  font-size: var(--tn-text-sm);
  cursor: pointer;
  transition: all var(--tn-transition);
}

.tn-page-btn:hover { background: var(--tn-primary-light); border-color: var(--tn-primary); color: var(--tn-primary); }
.tn-page-btn.active { background: var(--tn-primary); border-color: var(--tn-primary); color: white; font-weight: 600; }
.tn-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Modal ──────────────────────────────────────────────────── */
.tn-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(4px);
  z-index: var(--tn-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tn-space-4);
  animation: tn-fade-in var(--tn-transition-md) ease;
}

.tn-modal {
  background: var(--tn-surface);
  border-radius: var(--tn-radius-xl);
  box-shadow: var(--tn-shadow-xl);
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: tn-slide-up var(--tn-transition-md) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tn-modal-sm  { max-width: 28rem; }
.tn-modal-md  { max-width: 40rem; }
.tn-modal-lg  { max-width: 56rem; }
.tn-modal-xl  { max-width: 72rem; }
.tn-modal-full { max-width: 95vw; }

.tn-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tn-space-5) var(--tn-space-6);
  border-bottom: 1px solid var(--tn-border);
  flex-shrink: 0;
}

.tn-modal-title {
  font-size: var(--tn-text-xl);
  font-weight: 600;
  color: var(--tn-text);
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
}

.tn-modal-close {
  width: 2rem;
  height: 2rem;
  border-radius: var(--tn-radius);
  border: none;
  background: transparent;
  color: var(--tn-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--tn-transition);
}
.tn-modal-close:hover { background: var(--tn-gray-100); color: var(--tn-text); }

.tn-modal-body {
  padding: var(--tn-space-6);
  overflow-y: auto;
  flex: 1;
}

.tn-modal-footer {
  padding: var(--tn-space-4) var(--tn-space-6);
  border-top: 1px solid var(--tn-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tn-space-3);
  flex-shrink: 0;
  background: var(--tn-gray-50);
}

/* ── Loading / Skeleton ─────────────────────────────────────── */
.tn-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: inherit;
  backdrop-filter: blur(2px);
}

.tn-dark .tn-loading-overlay { background: rgb(15 23 42 / 0.8); }

.tn-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--tn-border);
  border-top-color: var(--tn-primary);
  border-radius: 50%;
  animation: tn-spin 0.7s linear infinite;
}

.tn-spinner-sm { width: 1rem; height: 1rem; border-width: 2px; }
.tn-spinner-lg { width: 3rem; height: 3rem; border-width: 4px; }

.tn-skeleton {
  background: linear-gradient(90deg, var(--tn-gray-200) 25%, var(--tn-gray-100) 50%, var(--tn-gray-200) 75%);
  background-size: 200% 100%;
  animation: tn-shimmer 1.5s infinite;
  border-radius: var(--tn-radius);
}

.tn-skeleton-text { height: 0.875rem; margin-bottom: var(--tn-space-2); }
.tn-skeleton-title { height: 1.25rem; width: 60%; margin-bottom: var(--tn-space-3); }
.tn-skeleton-row { height: 2.5rem; margin-bottom: var(--tn-space-2); }

/* ── Alert / Error ──────────────────────────────────────────── */
.tn-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--tn-space-3);
  padding: var(--tn-space-4);
  border-radius: var(--tn-radius-lg);
  border: 1px solid;
  font-size: var(--tn-text-sm);
  animation: tn-fade-in var(--tn-transition-md) ease;
}

.tn-alert-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; }
.tn-alert-content { flex: 1; }
.tn-alert-title { font-weight: 600; margin-bottom: var(--tn-space-1); }
.tn-alert-message { color: inherit; opacity: 0.85; }

.tn-alert-error   { background: var(--tn-danger-light);  border-color: #FECACA; color: #991B1B; }
.tn-alert-warning { background: var(--tn-warning-light); border-color: #FDE68A; color: #92400E; }
.tn-alert-success { background: var(--tn-success-light); border-color: #BBF7D0; color: #15803D; }
.tn-alert-info    { background: var(--tn-info-light);    border-color: #A5F3FC; color: #0E7490; }

/* ── Toast ──────────────────────────────────────────────────── */
.tn-toast-container {
  position: fixed;
  bottom: var(--tn-space-6);
  right: var(--tn-space-6);
  z-index: var(--tn-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  max-width: 24rem;
}

.tn-toast {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  padding: var(--tn-space-3) var(--tn-space-4);
  background: var(--tn-gray-900);
  color: white;
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-lg);
  font-size: var(--tn-text-sm);
  animation: tn-slide-in-right var(--tn-transition-md) ease;
}

.tn-toast-success { background: #15803D; }
.tn-toast-error   { background: #991B1B; }
.tn-toast-warning { background: #92400E; }

/* ── Search Bar ─────────────────────────────────────────────── */
.tn-search-bar {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  flex-wrap: wrap;
}

.tn-search-input-wrapper {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.tn-search-icon {
  position: absolute;
  left: var(--tn-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--tn-text-secondary);
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}

.tn-search-input {
  padding-left: 2.25rem !important;
}

.tn-search-clear {
  position: absolute;
  right: var(--tn-space-2);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--tn-text-secondary);
  cursor: pointer;
  padding: var(--tn-space-1);
  border-radius: var(--tn-radius-sm);
  display: flex;
  align-items: center;
  transition: color var(--tn-transition);
}
.tn-search-clear:hover { color: var(--tn-text); }

/* ── Stats / KPI Cards ──────────────────────────────────────── */
.tn-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--tn-space-4);
  margin-bottom: var(--tn-space-6);
}

.tn-stat-card {
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius-lg);
  padding: var(--tn-space-4) var(--tn-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  transition: all var(--tn-transition);
  position: relative;
  overflow: hidden;
}

.tn-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tn-primary);
  border-radius: var(--tn-radius-lg) var(--tn-radius-lg) 0 0;
}

.tn-stat-card:hover { box-shadow: var(--tn-shadow-md); transform: translateY(-2px); }

.tn-stat-label {
  font-size: var(--tn-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tn-text-secondary);
}

.tn-stat-value {
  font-size: var(--tn-text-2xl);
  font-weight: 700;
  color: var(--tn-text);
  line-height: 1;
}

.tn-stat-sub {
  font-size: var(--tn-text-xs);
  color: var(--tn-text-secondary);
}

.tn-stat-card.success::before { background: var(--tn-success); }
.tn-stat-card.warning::before { background: var(--tn-warning); }
.tn-stat-card.danger::before  { background: var(--tn-danger); }
.tn-stat-card.info::before    { background: var(--tn-info); }

/* ── Tabs ───────────────────────────────────────────────────── */
.tn-tabs {
  display: flex;
  border-bottom: 2px solid var(--tn-border);
  gap: 0;
  overflow-x: auto;
}

.tn-tab {
  padding: var(--tn-space-3) var(--tn-space-5);
  font-size: var(--tn-text-sm);
  font-weight: 500;
  color: var(--tn-text-secondary);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--tn-transition);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
}

.tn-tab:hover { color: var(--tn-primary); }
.tn-tab.active { color: var(--tn-primary); border-bottom-color: var(--tn-primary); }

/* ── Toolbar ────────────────────────────────────────────────── */
.tn-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-3);
  flex-wrap: wrap;
  padding: var(--tn-space-4) var(--tn-space-6);
  border-bottom: 1px solid var(--tn-border);
  background: var(--tn-surface);
}

.tn-toolbar-left,
.tn-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  flex-wrap: wrap;
}

/* ── Divider ────────────────────────────────────────────────── */
.tn-divider {
  height: 1px;
  background: var(--tn-border);
  margin: var(--tn-space-4) 0;
}

.tn-divider-vertical {
  width: 1px;
  height: 1.5rem;
  background: var(--tn-border);
}

/* ── Grid de formulario ─────────────────────────────────────── */
.tn-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--tn-space-4);
}

.tn-form-grid-2 { grid-template-columns: repeat(2, 1fr); }
.tn-form-grid-3 { grid-template-columns: repeat(3, 1fr); }
.tn-col-span-2  { grid-column: span 2; }
.tn-col-span-3  { grid-column: span 3; }
.tn-col-full    { grid-column: 1 / -1; }

/* ── Chip / Tag ─────────────────────────────────────────────── */
.tn-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-1);
  padding: var(--tn-space-1) var(--tn-space-2);
  background: var(--tn-gray-100);
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius-full);
  font-size: var(--tn-text-xs);
  color: var(--tn-text-secondary);
}

.tn-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tn-text-secondary);
  display: flex;
  align-items: center;
  padding: 0;
  transition: color var(--tn-transition);
}
.tn-chip-remove:hover { color: var(--tn-danger); }

/* ── Tooltip ────────────────────────────────────────────────── */
.tn-tooltip-wrapper { position: relative; display: inline-flex; }

.tn-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--tn-gray-900);
  color: white;
  font-size: var(--tn-text-xs);
  padding: var(--tn-space-1) var(--tn-space-2);
  border-radius: var(--tn-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--tn-transition);
  z-index: var(--tn-z-tooltip);
}

.tn-tooltip-wrapper:hover .tn-tooltip { opacity: 1; }

/* ── Confirm Dialog ─────────────────────────────────────────── */
.tn-confirm-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--tn-space-4);
}

.tn-confirm-icon.danger  { background: var(--tn-danger-light);  color: var(--tn-danger); }
.tn-confirm-icon.warning { background: var(--tn-warning-light); color: var(--tn-warning); }
.tn-confirm-icon.info    { background: var(--tn-info-light);    color: var(--tn-info); }

.tn-confirm-title {
  font-size: var(--tn-text-xl);
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--tn-space-2);
}

.tn-confirm-message {
  font-size: var(--tn-text-sm);
  color: var(--tn-text-secondary);
  text-align: center;
  line-height: 1.6;
}

/* ── Kardex específico ──────────────────────────────────────── */
.tn-kardex-entrada { color: var(--tn-success); font-weight: 600; }
.tn-kardex-salida  { color: var(--tn-danger);  font-weight: 600; }
.tn-kardex-anulado { opacity: 0.5; text-decoration: line-through; }

.tn-kardex-saldo {
  font-family: var(--tn-font-mono);
  font-size: var(--tn-text-sm);
  font-weight: 600;
}

/* ── Stock indicator ────────────────────────────────────────── */
.tn-stock-indicator {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
}

.tn-stock-bar {
  flex: 1;
  height: 6px;
  background: var(--tn-gray-200);
  border-radius: var(--tn-radius-full);
  overflow: hidden;
}

.tn-stock-fill {
  height: 100%;
  border-radius: var(--tn-radius-full);
  transition: width var(--tn-transition-lg);
}

.tn-stock-fill.high   { background: var(--tn-success); }
.tn-stock-fill.medium { background: var(--tn-warning); }
.tn-stock-fill.low    { background: var(--tn-danger); }

/* ── Animaciones ────────────────────────────────────────────── */
@keyframes tn-spin {
  to { transform: rotate(360deg); }
}

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

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

@keyframes tn-slide-up {
  from { opacity: 0; transform: translateY(1.5rem) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tn-slide-in-right {
  from { opacity: 0; transform: translateX(2rem); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes tn-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.tn-animate-pulse { animation: tn-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tn-form-grid-2,
  .tn-form-grid-3 { grid-template-columns: 1fr; }
  .tn-col-span-2,
  .tn-col-span-3  { grid-column: span 1; }
  .tn-toolbar     { flex-direction: column; align-items: stretch; }
  .tn-toolbar-left,
  .tn-toolbar-right { justify-content: flex-start; }
  .tn-stats-grid  { grid-template-columns: repeat(2, 1fr); }
  .tn-modal-body  { padding: var(--tn-space-4); }
  .tn-card-body   { padding: var(--tn-space-4); }
}

@media (max-width: 480px) {
  .tn-stats-grid { grid-template-columns: 1fr; }
  .tn-pagination { justify-content: center; }
}

/* ── Utilidades ─────────────────────────────────────────────── */
.tn-text-right  { text-align: right; }
.tn-text-center { text-align: center; }
.tn-text-mono   { font-family: var(--tn-font-mono); }
.tn-text-sm     { font-size: var(--tn-text-sm); }
.tn-text-xs     { font-size: var(--tn-text-xs); }
.tn-text-muted  { color: var(--tn-text-secondary); }
.tn-fw-600      { font-weight: 600; }
.tn-fw-700      { font-weight: 700; }
.tn-d-flex      { display: flex; }
.tn-align-center { align-items: center; }
.tn-gap-2       { gap: var(--tn-space-2); }
.tn-gap-3       { gap: var(--tn-space-3); }
.tn-mt-4        { margin-top: var(--tn-space-4); }
.tn-mb-4        { margin-bottom: var(--tn-space-4); }
.tn-w-full      { width: 100%; }
.tn-relative    { position: relative; }
.tn-hidden      { display: none !important; }
.tn-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}