/* ═══════════════════════════════════════════════════════════════
   Singularity Licitaciones — Design System CSS
   DESIGN_VARIANCE: 5 | MOTION_INTENSITY: 4 | VISUAL_DENSITY: 7
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── Typography ───────────────────────────────────────────────── */
.font-display { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.font-body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; }
.font-data { font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-variant-numeric: tabular-nums; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-tighter { letter-spacing: -0.05em; }

/* ── Line Clamp ───────────────────────────────────────────────── */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── HTMX States ──────────────────────────────────────────────── */
.htmx-indicator { display: none; opacity: 0; transition: opacity 200ms ease-out; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; opacity: 1; }
[x-cloak] { display: none !important; }

/* ── Urgency Colors ───────────────────────────────────────────── */
.urgency-low { color: #059669; }
.urgency-medium { color: #d97706; }
.urgency-high { color: #ea580c; }
.urgency-critical { color: #dc2626; font-weight: 700; }

/* ── Search Highlight ─────────────────────────────────────────── */
mark { background: linear-gradient(120deg, #fef08a 0%, #fde68a 100%); padding: 1px 4px; border-radius: 3px; }

/* ── Skeleton Loading ─────────────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}
.skeleton-text { height: 1em; margin-bottom: 0.5em; border-radius: 4px; }
.skeleton-text:last-child { width: 60%; }

/* ── Card Hover ───────────────────────────────────────────────── */
.card-hover {
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -5px rgba(15, 23, 42, 0.08), 0 4px 10px -3px rgba(15, 23, 42, 0.04);
}
.card-hover:active {
  transform: translateY(0) scale(0.995);
}

/* ── Tactile Button Feedback ──────────────────────────────────── */
.btn-tactile {
  transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-tactile:hover {
  transform: translateY(-1px);
}
.btn-tactile:active {
  transform: translateY(0) scale(0.98);
}

/* ── Stagger Load Animation ───────────────────────────────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.stagger-item {
  opacity: 0;
  animation: fadeSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 60ms; }
.stagger-item:nth-child(3) { animation-delay: 120ms; }
.stagger-item:nth-child(4) { animation-delay: 180ms; }
.stagger-item:nth-child(5) { animation-delay: 240ms; }
.stagger-item:nth-child(6) { animation-delay: 300ms; }
.stagger-item:nth-child(7) { animation-delay: 360ms; }
.stagger-item:nth-child(8) { animation-delay: 420ms; }
.stagger-item:nth-child(9) { animation-delay: 480ms; }
.stagger-item:nth-child(10) { animation-delay: 540ms; }

/* ── Nav / Mobile Menu ────────────────────────────────────────── */
.mobile-menu { max-height: 0; overflow: hidden; transition: max-height 300ms cubic-bezier(0.16, 1, 0.3, 1); }
.mobile-menu.open { max-height: 400px; }

/* ── Toast Notifications ──────────────────────────────────────── */
@keyframes toastIn { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
.toast { animation: toastIn 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.toast.dismiss { animation: toastOut 200ms ease-in forwards; }

/* ── Urgency Pulse ────────────────────────────────────────────── */
@keyframes urgencyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.urgency-pulse { animation: urgencyPulse 2s ease-in-out infinite; }

/* ── Custom Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Focus Ring ───────────────────────────────────────────────── */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2563eb;
  border-radius: 4px;
}

/* ── Data Table ───────────────────────────────────────────────── */
.data-table th { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #64748b; }
.data-table td { font-size: 0.875rem; }
.data-table tbody tr { transition: background-color 150ms ease; }
.data-table tbody tr:hover { background-color: #f8fafc; }

/* ── Gradient Accent Bar ──────────────────────────────────────── */
.accent-bar {
  background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 50%, #06b6d4 100%);
  height: 3px;
}

/* ── Badge Pill ───────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; line-height: 1.5; }

/* ── Responsive Table → Cards ─────────────────────────────────── */
@media (max-width: 767px) {
  .responsive-table thead { display: none; }
  .responsive-table tbody tr {
    display: block;
    padding: 1rem;
    margin-bottom: 0.5rem;
    background: white;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
  }
  .responsive-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.375rem 0;
    border: none;
    font-size: 0.875rem;
  }
  .responsive-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #64748b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    margin-right: 1rem;
  }
  .responsive-table tbody td:first-child { flex-direction: column; gap: 0.25rem; }
  .responsive-table tbody td:first-child::before { margin-bottom: 0.25rem; }
}

/* ── Print ────────────────────────────────────────────────────── */
@media print {
  nav, footer, .no-print { display: none !important; }
  .shadow-sm, .shadow, .card-hover { box-shadow: none !important; }
  body { font-size: 12pt; }
}