/* ═══════════════════════════════════════════════════════════════════════════
   ATLAS Set C — Brex Wallet · Linear Actionable · Risk Score
   Sprint Mega Redesign UI 2026-06-09 · SS-7a Caja Set C
   Fuente única: mockups/caja-C-banking.html
   Carga DESPUÉS de /css/tailwind.css y /css/atlas-tokens.css.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Set C palette extension (mockup caja-C-banking.html) */
  --setc-navy-50:  #F3F5FA;
  --setc-navy-100: #E0E6F1;
  --setc-navy-200: #B8C5DB;
  --setc-navy-400: #3F567E;
  --setc-navy-600: #142447;
  --setc-navy-700: #0E1A3A;

  --setc-bronze-300: #C89E63;
  --setc-bronze-400: #A87333;
  --setc-bronze-500: #8B5C24;

  --setc-ivory-50:  #FFFEFB;
  --setc-ivory-100: #FAF8F2;
  --setc-ivory-200: #F0EBDE;

  --setc-ok:     #0F8060;
  --setc-warn:   #B07514;
  --setc-danger: #A23435;
}

/* ── Backgrounds ─────────────────────────────────────────────────────────── */
.bg-navy-50  { background-color: var(--setc-navy-50)  !important; }
.bg-navy-100 { background-color: var(--setc-navy-100) !important; }
.bg-navy-200 { background-color: var(--setc-navy-200) !important; }
.bg-navy-400 { background-color: var(--setc-navy-400) !important; }
.bg-navy-600 { background-color: var(--setc-navy-600) !important; }
.bg-navy-700 { background-color: var(--setc-navy-700) !important; }

.bg-bronze-300 { background-color: var(--setc-bronze-300) !important; }
.bg-bronze-400 { background-color: var(--setc-bronze-400) !important; }
.bg-bronze-500 { background-color: var(--setc-bronze-500) !important; }

.bg-ivory-50  { background-color: var(--setc-ivory-50)  !important; }
.bg-ivory-100 { background-color: var(--setc-ivory-100) !important; }
.bg-ivory-200 { background-color: var(--setc-ivory-200) !important; }

.bg-ok     { background-color: var(--setc-ok)     !important; }
.bg-warn   { background-color: var(--setc-warn)   !important; }
.bg-danger { background-color: var(--setc-danger) !important; }

/* tinted backgrounds for status pills (warn/10, danger/10, ok/10, bronze/20) */
.bg-warn\/10   { background-color: color-mix(in srgb, var(--setc-warn) 10%, transparent) !important; }
.bg-warn\/20   { background-color: color-mix(in srgb, var(--setc-warn) 20%, transparent) !important; }
.bg-danger\/10 { background-color: color-mix(in srgb, var(--setc-danger) 10%, transparent) !important; }
.bg-danger\/20 { background-color: color-mix(in srgb, var(--setc-danger) 20%, transparent) !important; }
.bg-ok\/10     { background-color: color-mix(in srgb, var(--setc-ok) 10%, transparent) !important; }
.bg-ok\/20     { background-color: color-mix(in srgb, var(--setc-ok) 20%, transparent) !important; }
.bg-bronze-100 { background-color: color-mix(in srgb, var(--setc-bronze-400) 12%, white) !important; }
.bg-bronze-400\/20 { background-color: color-mix(in srgb, var(--setc-bronze-400) 20%, transparent) !important; }
.bg-navy-100\/20 { background-color: color-mix(in srgb, var(--setc-navy-100) 20%, transparent) !important; }
.bg-navy-200\/20 { background-color: color-mix(in srgb, var(--setc-navy-200) 20%, transparent) !important; }
.bg-navy-700\/10 { background-color: color-mix(in srgb, var(--setc-navy-700) 10%, transparent) !important; }
.bg-navy-50\/50 { background-color: color-mix(in srgb, var(--setc-navy-50) 50%, transparent) !important; }
.bg-bronze-600 { background-color: var(--setc-bronze-400) !important; } /* alias */

/* ── Text ────────────────────────────────────────────────────────────────── */
.text-navy-200 { color: var(--setc-navy-200) !important; }
.text-navy-300 { color: color-mix(in srgb, var(--setc-navy-400) 70%, var(--setc-navy-200) 30%) !important; }
.text-navy-400 { color: var(--setc-navy-400) !important; }
.text-navy-600 { color: var(--setc-navy-600) !important; }
.text-navy-700 { color: var(--setc-navy-700) !important; }

.text-bronze-100 { color: color-mix(in srgb, var(--setc-bronze-300) 50%, white) !important; }
.text-bronze-300 { color: var(--setc-bronze-300) !important; }
.text-bronze-400 { color: var(--setc-bronze-400) !important; }
.text-bronze-500 { color: var(--setc-bronze-500) !important; }
.text-bronze-600 { color: var(--setc-bronze-500) !important; }

.text-ivory-100 { color: var(--setc-ivory-100) !important; }
.text-ok     { color: var(--setc-ok)     !important; }
.text-warn   { color: var(--setc-warn)   !important; }
.text-danger { color: var(--setc-danger) !important; }

/* ── Border ──────────────────────────────────────────────────────────────── */
.border-navy-50  { border-color: var(--setc-navy-50)  !important; }
.border-navy-100 { border-color: var(--setc-navy-100) !important; }
.border-navy-200 { border-color: var(--setc-navy-200) !important; }
.border-bronze-300 { border-color: var(--setc-bronze-300) !important; }
.border-bronze-400 { border-color: var(--setc-bronze-400) !important; }
.border-ok     { border-color: var(--setc-ok)     !important; }
.border-warn   { border-color: var(--setc-warn)   !important; }
.border-danger { border-color: var(--setc-danger) !important; }

/* ── Hover variants ──────────────────────────────────────────────────────── */
.hover\:bg-bronze-500:hover { background-color: var(--setc-bronze-500) !important; }
.hover\:border-bronze-300:hover { border-color: var(--setc-bronze-300) !important; }
.hover\:bg-white\/10:hover { background-color: rgba(255,255,255,0.10) !important; }

/* ── Numeric font (DM Mono with tabular numbers) ─────────────────────────── */
.num {
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ── Wallet card gradient (Brex-style top wallet) ────────────────────────── */
.card-grad {
  background: linear-gradient(135deg, var(--setc-navy-700) 0%, var(--setc-navy-600) 100%);
}

/* ── Risk gauge background stroke ────────────────────────────────────────── */
.gauge-bg { stroke: var(--setc-navy-100); }

/* ── Pill (badge ATLAS reusable) ─────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}

/* ── Focus visible (WCAG 2.1 AA) ─────────────────────────────────────────── */
.setc-focus:focus-visible {
  outline: 2px solid var(--setc-bronze-400);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Sticky KPI header de la wallet (Caja Set C) ─────────────────────────── */
.setc-sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--setc-ivory-100);
  backdrop-filter: saturate(180%) blur(8px);
}

/* ── Wallet sub-caja item (hover state + a11y) ──────────────────────────── */
.setc-subcaja-item {
  transition: background-color .15s ease;
  cursor: pointer;
}
.setc-subcaja-item:focus-visible {
  outline: 2px solid var(--setc-bronze-300);
  outline-offset: -2px;
  border-radius: 8px;
}

/* ── Skeletons (loading states wallet) ──────────────────────────────────── */
.setc-skeleton {
  background: linear-gradient(90deg, var(--setc-navy-100) 0%, var(--setc-ivory-200) 50%, var(--setc-navy-100) 100%);
  background-size: 200% 100%;
  animation: setcShimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes setcShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Action card row (Linear Actionable) ────────────────────────────────── */
.setc-action-card {
  transition: border-color .15s ease, transform .15s ease;
}
.setc-action-card:hover {
  border-color: var(--setc-bronze-300);
}

/* ── Reduce motion preference ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .setc-skeleton { animation: none; }
  .setc-action-card { transition: none; }
  .setc-subcaja-item { transition: none; }
}

/* ── Mobile responsive helpers ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .setc-wallet-grid {
    grid-template-columns: 1fr !important;
  }
  .setc-wallet-grid .setc-wallet-main {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }
  .setc-action-grid {
    grid-template-columns: 1fr !important;
  }
}