/* =============================================================
   CryptoSwap — Bloomberg Terminal Effects layer
   Topbar status bar, ticker tape, scanlines, pulse, glow.
   Loaded LAST so wins specificity vs. base/components/views.
   ============================================================= */

/* ----- Body scanlines + monospace cursor on focus inputs ----- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(255,255,255,.012) 2px,
    rgba(255,255,255,.012) 3px
  );
}

/* Push body down to make room for topbar+ticker */
body { padding-top: 60px !important; }

/* ----- Topbar ----- */
.bb-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: #000;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  justify-content: space-between;
  z-index: 9999;
  letter-spacing: .02em;
}
.bb-topbar .l, .bb-topbar .r {
  display: flex;
  gap: 22px;
  align-items: center;
}
.bb-topbar span b {
  color: var(--text-secondary);
  font-weight: 500;
  margin-right: 4px;
}
.bb-pulse {
  width: 7px;
  height: 7px;
  background: var(--accent-live);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-live);
  animation: bb-pulse 1.5s infinite;
  display: inline-block;
}
@keyframes bb-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ----- Ticker tape ----- */
.bb-ticker {
  position: fixed;
  top: 28px;
  left: 0;
  right: 0;
  height: 32px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  z-index: 9999;
  display: flex;
  align-items: center;
}
.bb-ticker-track {
  display: flex;
  gap: 48px;
  padding-left: 16px;
  animation: bb-scroll 60s linear infinite;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
}
@keyframes bb-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.bb-ticker .t { display: flex; gap: 8px; align-items: center; }
.bb-ticker .t .sym { color: var(--text-primary); font-weight: 600; }
.bb-ticker .t .px  { color: var(--text-secondary); }
.bb-ticker .t .ch.u { color: var(--accent-live); }
.bb-ticker .t .ch.d { color: var(--accent-danger); }

/* ----- Panel headers (replace generic h2) ----- */
.bb-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.bb-panel-head b {
  color: var(--brand-primary);
  margin-right: 6px;
  font-weight: 700;
}
.bb-panel-head .meta {
  color: var(--text-faint);
  letter-spacing: .15em;
  font-weight: 400;
}

/* ----- Sharper cards (Bloomberg uses panels, not floating cards) ----- */
.card {
  border-radius: 4px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  position: relative;
}
.card:hover { border-color: var(--border-hover) !important; }

/* Add a subtle orange accent line on the active/important card */
.card.bb-active {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 1px var(--brand-primary), 0 0 20px rgba(255, 107, 0, .15) !important;
}

/* ----- Buttons get the glow on hover ----- */
.btn-primary,
.btn-brand,
.cta-btn,
.portal-nav-link.cta,
.topbar-cta-btn {
  border-radius: 2px !important;
  letter-spacing: .04em;
  transition: all .2s ease;
}
.btn-primary:hover,
.btn-brand:hover,
.cta-btn:hover,
.portal-nav-link.cta:hover,
.topbar-cta-btn:hover {
  box-shadow: 0 0 24px rgba(255, 107, 0, .45);
  transform: translateY(-1px);
}

/* ----- Sidebar brand icon glow ----- */
.sidebar-brand-icon {
  background: var(--brand-primary) !important;
  box-shadow: 0 0 12px rgba(255, 107, 0, .5);
}

/* ----- Sidebar link: hover & active both get orange accent ----- */
.sidebar-link {
  position: relative;
  transition: background .18s ease, color .18s ease;
}
.sidebar-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--brand-primary);
  transition: width .18s ease, box-shadow .18s ease;
}
.sidebar-link:hover {
  background: linear-gradient(90deg, rgba(255, 107, 0, .07), transparent 70%) !important;
  color: var(--brand-primary) !important;
}
.sidebar-link:hover::before {
  width: 3px;
  box-shadow: 0 0 6px rgba(255, 107, 0, .6);
}
.sidebar-link:hover i { color: var(--brand-primary) !important; }
.sidebar-link.active {
  background: linear-gradient(90deg, rgba(255, 107, 0, .14), transparent 60%) !important;
  color: var(--text-primary) !important;
}
.sidebar-link.active::before {
  width: 3px;
  box-shadow: 0 0 8px var(--brand-primary);
}
.sidebar-link.active i { color: var(--brand-primary) !important; }

/* ----- Inputs: focus ring orange ----- */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 1px var(--brand-primary), 0 0 12px rgba(255, 107, 0, .2) !important;
  outline: none !important;
}

/* ----- Links: orange on hover ----- */
a:not(.sidebar-link):not(.cta-btn):not(.btn):not(.portal-nav-link):hover {
  color: var(--brand-primary) !important;
}

/* ----- Status badges & pills (sent, approved, etc.) ----- */
.badge, .pill, .status-pill {
  border-radius: 2px !important;
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
  padding: 3px 8px;
}

/* ----- Tables: terminal-like ----- */
table.table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border) !important;
  font-weight: 500;
}
table.table tbody td {
  font-family: var(--font-mono);
  font-size: 13px;
  border-color: var(--border) !important;
}
table.table tbody tr:hover td { background: var(--bg-hover) !important; }

/* ----- Headings: Archivo bold + tracking ----- */
.display-1, .display-2, .display-3, .display-4,
.display-mega, h1.display, h2.display {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  text-transform: uppercase;
}

/* ----- Blinking cursor inline (use class .bb-cursor) ----- */
.bb-cursor::after {
  content: "";
  display: inline-block;
  width: .55em;
  height: .85em;
  background: var(--brand-primary);
  margin-left: 4px;
  vertical-align: middle;
  animation: bb-blink 1s step-end infinite;
}
@keyframes bb-blink { 50% { opacity: 0; } }

/* ----- Admin sidebar section labels (PRINCIPAL / COMPLIANCE / SISTEMA) ----- */
.sidebar-section-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  color: var(--text-faint) !important;
  padding: 16px 16px 8px !important;
  position: relative;
}
.sidebar-section-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 1px;
  background: var(--brand-primary);
  margin-right: 8px;
  vertical-align: middle;
}

/* ----- Admin H1 (page title) gets Archivo display ----- */
.admin-content h1,
.admin-content > div > h1,
.portal-shell h1 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase;
  font-size: clamp(28px, 4vw, 42px);
}
.admin-content h1::before {
  content: "// ";
  color: var(--brand-primary);
  font-weight: 900;
}

/* ----- Bootstrap nav-tabs (admin: Pendientes / Aprobados / etc.) ----- */
.nav-tabs {
  border-bottom: 1px solid var(--border) !important;
  gap: 0;
}
.nav-tabs .nav-link {
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text-dim) !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 12px 18px !important;
  position: relative;
  transition: color .15s;
}
.nav-tabs .nav-link:hover {
  color: var(--text-secondary) !important;
  background: var(--bg-hover) !important;
}
.nav-tabs .nav-link.active {
  color: var(--brand-primary) !important;
  background: transparent !important;
  border-color: transparent !important;
  font-weight: 600;
}
.nav-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--brand-primary);
  box-shadow: 0 0 8px var(--brand-primary);
}

/* ----- Bootstrap btn-success / btn-danger keep semantic but sharper ----- */
.btn-success, .btn-outline-success {
  border-radius: 2px !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}
.btn-danger, .btn-outline-danger {
  border-radius: 2px !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ----- Status pills (Pendiente / Aprobado / Rechazado) ----- */
.badge-warning, .bg-warning,
.badge-success, .bg-success,
.badge-danger, .bg-danger,
.badge-secondary, .bg-secondary,
.badge-info, .bg-info {
  border-radius: 2px !important;
  font-family: var(--font-mono) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
  font-weight: 600 !important;
}

/* ----- Footer (admin/portal) gets pulsing dot ----- */
.dot-live {
  background: var(--accent-live) !important;
  box-shadow: 0 0 6px var(--accent-live);
  animation: bb-pulse 1.5s infinite;
}

/* ----- Admin sidebar bottom user card ----- */
.sidebar-user-card,
.admin-user-card {
  border-top: 1px solid var(--border) !important;
  font-family: var(--font-mono);
}

/* ----- alert-light usado como info strip → look terminal con acento naranja ----- */
.alert.alert-light {
  background: rgba(255, 107, 0, .06) !important;
  border: 1px solid rgba(255, 107, 0, .3) !important;
  color: var(--text-secondary) !important;
  border-radius: 2px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: .04em;
  padding: 12px 14px !important;
  text-transform: uppercase;
}
.alert.alert-light strong {
  color: var(--brand-primary) !important;
  font-weight: 600;
  letter-spacing: 0;
}

/* ----- Form labels: uppercase mono small ----- */
.form-label,
label.form-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important;
  margin-bottom: 6px !important;
}

/* ----- Mobile: hide ticker, keep topbar smaller ----- */
@media (max-width: 768px) {
  .bb-ticker { display: none; }
  body { padding-top: 28px !important; }
  .bb-topbar { font-size: 10px; padding: 0 10px; }
  .bb-topbar .l, .bb-topbar .r { gap: 12px; }
  .bb-topbar .l span:nth-child(n+4),
  .bb-topbar .r span:nth-child(n+2) { display: none; }
}