/* Exchange — Estilos globales */
/* NOTA: el prefijo "CPX" fue eliminado — este archivo es brand-agnóstico.
   brand.js inyecta las vars reales en :root antes del primer paint.       */

/* ═══════════════════════════════════════════════════════════════════════════
   BRAND VARIABLES — fallbacks CSS; sobreescritas en runtime por brand.js
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Colores de marca — brand.js hace setProperty() de estas vars en load */
  --brand-primary:        #00C896;   /* default neutral; brand.js override */
  --brand-secondary:      #0A1628;
  --brand-gradient:       linear-gradient(135deg, #00C896, #0A1628);
  --brand-name:           'Exchange';
  --brand-id:             'exchange';

  /* Aliases semánticos — usar estos en componentes, no los --brand-* directo */
  --color-accent:         var(--brand-primary);
  --color-accent-hover:   color-mix(in srgb, var(--brand-primary) 85%, white);
  --color-bg-primary:     #0A1628;
  --color-bg-surface:     #0F1F35;
  --color-bg-card:        #152540;
  --color-text-primary:   #E8EDF5;
  --color-text-secondary: #8094B4;
  --color-border:         rgba(255, 255, 255, 0.08);
  --color-success:        #22C55E;
  --color-warning:        #F59E0B;
  --color-error:          #EF4444;

  /* Radios y sombras comunes */
  --radius-card:   1rem;
  --radius-btn:    0.75rem;
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-glow:   0 4px 24px color-mix(in srgb, var(--brand-primary) 30%, transparent);
}

/* --- Contextos nativo (inyectados por Delphi WebView) --- */
.ctx-mobile { font-size: 15px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
.ctx-mobile button,
.ctx-mobile a,
.ctx-mobile .touch-target { min-height: 44px; min-width: 44px; }
.ctx-mobile label,
.ctx-mobile .field-label { font-size: 13px; }
.ctx-mobile .section-header { font-size: 11px; letter-spacing: 0.15em; font-weight: 900; }
.ctx-mobile .data-value    { font-size: 16px; }
.ctx-mobile .data-total    { font-size: 17px; font-weight: 700; }
.ctx-mobile .font-mono     { font-size: 14px; }

/* Glassmorphism card */
.glass-card {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(99, 102, 241, 0.12);
}

.dark .glass-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 15%, transparent);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.3); border-radius: 99px; }
.dark ::-webkit-scrollbar-thumb { background: rgba(30,41,59,0.8); }

/* Table rows */
.cpx-table tbody tr:hover { background: rgba(20,184,166,0.05); }
.cpx-table th { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; }

/* Brand-aware primary button */
.btn-primary {
  background: var(--brand-gradient);
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover {
  box-shadow: 0 4px 32px color-mix(in srgb, var(--brand-primary) 50%, transparent);
}

/* Status badges */
.badge-open    { background: rgba(20,184,166,0.15); color: #14b8a6; }
.badge-pending { background: rgba(234,179,8,0.15);  color: #eab308; }
.badge-done    { background: rgba(34,197,94,0.15);  color: #22c55e; }
.badge-cancelled { background: rgba(100,116,139,0.15); color: #64748b; }
.badge-disputed { background: rgba(239,68,68,0.15); color: #ef4444; }

/* HTMX anti-flash — patron ATTLAS_DEV_GUIDE §7.2 */
.htmx-swapping          { opacity: 0; transition: opacity 0.15s ease; }
.htmx-added             { opacity: 0; }
.htmx-added.htmx-settling { opacity: 1; transition: opacity 0.2s ease; }

#htmx-spinner {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary), #6366f1);
  z-index: 9999;
  animation: htmx-progress 1.5s ease infinite;
}
.htmx-request #htmx-spinner { display: block; }
@keyframes htmx-progress {
  0%   { width: 0; }
  50%  { width: 60%; }
  100% { width: 100%; }
}