/* ──────────────────────────────────────────────
   Bermatu — Components (fintech glass)
   ────────────────────────────────────────────── */

/* ── Accessibility: skip link + sr-only-focusable ─────────────────── */
.bm-skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--blue-700);
  color: #fff;
  font-weight: 600;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: top .2s var(--ease-out-soft);
}
.bm-skip-link:focus {
  top: 16px;
  outline: none;
  box-shadow: 0 0 0 3px rgba(36, 83, 222, 0.35);
}
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Mesh backdrops ─────────────────── */
.bm-mesh {
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, rgba(36, 83, 222, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 10%, rgba(124, 92, 250, 0.14), transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(83, 199, 251, 0.12), transparent 60%),
    linear-gradient(180deg, #F5F7FF 0%, #FAFBFF 60%, #FFFFFF 100%);
}
.bm-mesh-dark {
  background:
    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(59, 108, 238, 0.35), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 20%, rgba(124, 92, 250, 0.28), transparent 55%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(36, 83, 222, 0.4), transparent 60%),
    linear-gradient(180deg, #0A0F1E 0%, #0F1633 60%, #0A0F1E 100%);
  color: #fff;
}
.bm-grid-bg {
  background-image:
    linear-gradient(rgba(15,22,51,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,22,51,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Glass & cards ─────────────────── */
.bm-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-glass);
}
.bm-glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-glass);
}
.bm-glass-navy {
  background: rgba(15, 22, 51, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
}
.bm-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.bm-card-hover {
  transition: transform var(--dur) var(--ease-out-soft),
              box-shadow var(--dur) var(--ease-out-soft),
              border-color var(--dur) var(--ease-out-soft);
}
.bm-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
  border-color: var(--border-2);
}

/* ── Buttons ─────────────────── */
.bm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-family: inherit; font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out-soft),
              box-shadow var(--dur) var(--ease-out-soft),
              background var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft);
  white-space: nowrap;
  user-select: none;
}
.bm-btn:disabled,
.bm-btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.bm-btn-lg { padding: 13px 22px; font-size: 15px; border-radius: var(--r-md); }
.bm-btn-sm { padding: 7px 12px; font-size: 13px; }
.bm-btn-block { width: 100%; }

.bm-btn-primary {
  background: linear-gradient(180deg, var(--blue-500), var(--blue-700));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.1),
    var(--sh-blue);
}
.bm-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.1),
    0 12px 28px -6px rgba(36, 83, 222, 0.45),
    0 4px 8px rgba(36, 83, 222, 0.2);
}
.bm-btn-ghost {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--border);
  color: var(--ink);
}
.bm-btn-ghost:hover { background: #fff; border-color: var(--border-strong); }
.bm-btn-dark {
  background: var(--ink);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.bm-btn-dark:hover { transform: translateY(-1px); background: var(--ink-2); }
.bm-btn-danger {
  /* Blanco sobre rose-600 = 4.51:1 — pasa AA para texto normal. Mantener. */
  background: var(--rose-600);
  color: #fff;
}
.bm-btn-danger:hover { background: #DC2626; transform: translateY(-1px); }
.bm-btn-success {
  background: var(--emerald-500);
  color: #fff;
}
.bm-btn-success:hover { background: var(--emerald-600); transform: translateY(-1px); }

/* ── Pills & badges ─────────────────── */
.bm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  font-size: 12px; font-weight: 600;
  color: var(--slate-700);
  letter-spacing: -0.005em;
  box-shadow: var(--sh-1);
}
.bm-pill-dot {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue-500), var(--violet-500));
  color: #fff;
}
.bm-pill-dot svg { width: 10px; height: 10px; }
.bm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: -0.005em;
}
.bm-badge-success { background: var(--emerald-50); color: var(--emerald-600); }
.bm-badge-warning { background: var(--amber-50);   color: #B45309; }
.bm-badge-danger  { background: var(--rose-50);    color: var(--rose-700); }
.bm-badge-info    { background: var(--blue-50);    color: var(--blue-700); }
.bm-badge-muted   { background: var(--slate-100);  color: var(--slate-700); }

/* ── Inputs (audit-2026-05-18 polish: focus glow brand-tenant + states) ── */
.bm-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: 14.5px; font-family: inherit;
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out-soft),
              box-shadow var(--dur-fast) var(--ease-out-soft),
              background var(--dur-fast) var(--ease-out-soft);
}
.bm-input::placeholder { color: var(--slate-500); }
.bm-input:hover:not(:focus):not([aria-invalid="true"]) {
  border-color: var(--border-2);
  background: var(--slate-50, #F8FAFC);
}
.bm-input:focus {
  outline: none;
  border-color: var(--brand-tenant, var(--blue-600));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--brand-tenant, var(--blue-600)) 14%, transparent),
    0 1px 2px rgba(15, 22, 51, 0.04);
}
.bm-input[aria-invalid="true"] {
  border-color: var(--rose-700);
  box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.12);
  background: linear-gradient(180deg, #FEF2F2 0%, #fff 50%);
}
.bm-input[data-state="success"] {
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}
.bm-input-lg { padding: 15px 18px; font-size: 16px; border-radius: var(--r-md); }
.bm-input-sm { padding: 8px 12px; font-size: 13px; border-radius: var(--r-sm); }
.bm-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--slate-700);
  letter-spacing: -0.005em;
}
.bm-label-required::after {
  content: "*";
  color: var(--rose-600);
  margin-left: 4px;
  font-weight: 700;
}
.bm-hint {
  font-size: 12.5px;
  color: var(--slate-500);
  margin-top: 6px;
  line-height: 1.45;
}
.bm-field { margin-bottom: 18px; }
.bm-field-error {
  color: var(--rose-700);
  font-size: 12.5px;
  margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
  animation: bmFieldErrShake 0.32s var(--ease-out-soft) both;
  font-weight: 500;
}
.bm-field-error::before {
  content: "⚠";
  font-size: 13px;
  line-height: 1;
}
.bm-field-success {
  color: var(--emerald-600);
  font-size: 12.5px;
  margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
  font-weight: 500;
}
.bm-field-success::before {
  content: "✓";
  font-weight: 700;
}
@keyframes bmFieldErrShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}
/* Floating label opcional — <label class="bm-label bm-label-float"> sobre .bm-input vacío */
.bm-input-float {
  position: relative;
  margin-bottom: 18px;
}
.bm-input-float .bm-input {
  padding-top: 22px;
  padding-bottom: 8px;
}
.bm-input-float .bm-label-float {
  position: absolute;
  left: 14px; top: 14px;
  margin: 0;
  pointer-events: none;
  color: var(--slate-500);
  background: transparent;
  font-size: 13.5px;
  font-weight: 400;
  transition: top var(--dur-fast) var(--ease-out-soft),
              font-size var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft);
}
.bm-input-float .bm-input:focus + .bm-label-float,
.bm-input-float .bm-input:not(:placeholder-shown) + .bm-label-float {
  top: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-tenant, var(--blue-700));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Password toggle container */
.bm-input-wrap { position: relative; }
.bm-input-wrap .bm-input { padding-right: 42px; }
.bm-input-wrap .bm-input-addon {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  color: var(--slate-500);
  cursor: pointer;
  background: transparent; border: 0;
}
.bm-input-wrap .bm-input-addon:hover { background: var(--slate-100); color: var(--slate-700); }

/* ── Checkbox ─────────────────── */
.bm-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px;
  color: var(--slate-700);
  cursor: pointer;
  user-select: none;
}
.bm-check input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--blue-600);
  cursor: pointer;
}

/* ── Kbd ─────────────────── */
.bm-kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(15,22,51,0.06);
  border: 1px solid rgba(15,22,51,0.08);
  color: var(--slate-700);
}

/* ── Mono / serif accents ─────────────────── */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.grad-text {
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--violet-500) 50%, var(--cyan-500) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ── Logo mark (icono azul→violeta con shield) ─────────────────── */
.bm-logo-mark {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--violet-500) 100%);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(59, 108, 238, 0.55);
  flex: 0 0 auto;
}
.bm-logo-mark svg { width: 18px; height: 18px; }
.bm-wordmark {
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.bm-brand-row { display: inline-flex; align-items: center; gap: 10px; }

/* ── Dividers ─────────────────── */
.bm-divider {
  border: 0; height: 1px;
  background: var(--border);
  margin: 24px 0;
}
.bm-divider-text {
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 600;
  color: var(--slate-500);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 20px 0;
}
.bm-divider-text::before,
.bm-divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Eyebrow ─────────────────── */
.bm-eyebrow {
  display: inline-flex;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-700);
}

/* ── Reveal animation ─────────────────── */
@keyframes bm-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bm-fade-up { animation: bm-fade-up .7s var(--ease-out-expo) both; }
.bm-fade-up[data-delay="1"] { animation-delay: .08s; }
.bm-fade-up[data-delay="2"] { animation-delay: .16s; }
.bm-fade-up[data-delay="3"] { animation-delay: .24s; }
.bm-fade-up[data-delay="4"] { animation-delay: .32s; }
.bm-fade-up[data-delay="5"] { animation-delay: .40s; }
.bm-fade-up[data-delay="6"] { animation-delay: .48s; }

@keyframes bm-spin { to { transform: rotate(360deg); } }
.bm-spin { animation: bm-spin .6s linear infinite; }

@keyframes bm-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(36, 83, 222, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(36, 83, 222, 0); }
  100% { box-shadow: 0 0 0 0 rgba(36, 83, 222, 0); }
}
.bm-pulse { animation: bm-pulse-ring 1.8s var(--ease-out-expo) infinite; }

@keyframes bm-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
.bm-shake { animation: bm-shake .3s var(--ease-out-soft); }

/* ── Toast ─────────────────── */
.bm-toast {
  position: fixed;
  top: 24px; right: 24px;
  z-index: 1000;
  min-width: 280px; max-width: 440px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue-600);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  animation: bm-fade-up .25s var(--ease-out-soft);
  font-size: 14px;
}
.bm-toast-success { border-left-color: var(--emerald-500); }
.bm-toast-error   { border-left-color: var(--rose-700); }
.bm-toast-warning { border-left-color: var(--amber-500); }

/* ── Sparkline container ─────────────────── */
.bm-sparkline { width: 100%; height: 40px; display: block; }

/* ── Stepper ─────────────────── */
.bm-stepper {
  display: flex; align-items: center;
  gap: 0;
  width: 100%;
}
.bm-step {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--slate-500);
}
.bm-step-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border: 2px solid var(--border);
  font-weight: 700; font-size: 14px;
  color: var(--slate-500);
  transition: all var(--dur) var(--ease-out-soft);
}
.bm-step-label {
  font-size: 12.5px; font-weight: 500;
  color: var(--slate-500);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.bm-step.is-done .bm-step-circle {
  background: var(--emerald-500);
  border-color: var(--emerald-500);
  color: #fff;
}
.bm-step.is-done .bm-step-label { color: var(--emerald-600); }
.bm-step.is-current .bm-step-circle {
  background: var(--brand-tenant, var(--blue-700));
  border-color: var(--brand-tenant, var(--blue-700));
  color: #fff;
  animation: bm-pulse-ring 1.8s var(--ease-out-expo) infinite;
  /* Subtle glow + lift al volverse current */
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--brand-tenant, var(--blue-600)) 50%, transparent);
  transform: scale(1.05);
}
.bm-step.is-current .bm-step-label { color: var(--ink); font-weight: 600; }
.bm-step-circle .step-icon {
  /* Check icon dentro del círculo cuando is-done — animado al aparecer */
  width: 16px; height: 16px;
  animation: bm-step-check 0.4s var(--ease-out-expo) both;
}
@keyframes bm-step-check {
  0%   { opacity: 0; transform: scale(0.5) rotate(-30deg); }
  60%  { transform: scale(1.15) rotate(0deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
/* Sticker celebration cuando el último step se marca is-done — rotación + bounce */
.bm-step.is-current.bm-step-final .bm-step-circle { animation: bm-step-celebrate 0.7s var(--ease-out-expo) both; }
@keyframes bm-step-celebrate {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.2) rotate(-6deg); }
  40%  { transform: scale(0.92) rotate(6deg); }
  60%  { transform: scale(1.08) rotate(-3deg); }
  80%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

.bm-step-connector {
  flex: 1 1 auto;
  height: 2px;
  background: var(--border);
  margin: 0 8px;
  align-self: flex-start;
  margin-top: 17px;
  position: relative;
  overflow: hidden;
  transition: background var(--dur) var(--ease-out-soft);
  /* Background sutil cuando NO is-done para preparar el fill */
}
.bm-step-connector::after {
  /* Fill animation cuando se vuelve is-done — barre de izq a der */
  content: "";
  position: absolute; inset: 0 100% 0 0;
  background: var(--emerald-500);
  transition: inset 0.5s var(--ease-out-expo);
}
.bm-step-connector.is-done { background: var(--emerald-500); }
.bm-step-connector.is-done::after { inset: 0 0 0 0; }

/* Variante motion: pulse-ring del current step usa brand-tenant correcto */
@keyframes bm-pulse-ring {
  0%   { box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--brand-tenant, var(--blue-600)) 50%, transparent), 0 0 0 0 color-mix(in srgb, var(--brand-tenant, var(--blue-600)) 50%, transparent); }
  70%  { box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--brand-tenant, var(--blue-600)) 30%, transparent), 0 0 0 14px transparent; }
  100% { box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--brand-tenant, var(--blue-600)) 50%, transparent), 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-step.is-current .bm-step-circle { animation: none; }
  .bm-step-circle .step-icon { animation: none; }
  .bm-step-connector::after { transition: none; }
}

/* ── Tables ─────────────────── */
.bm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}
.bm-table th {
  text-align: left;
  font-weight: 600; font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-500);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--slate-50);
}
.bm-table td {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  color: var(--slate-700);
  vertical-align: middle;
}
.bm-table tr:hover td { background: rgba(36, 83, 222, 0.04); }
.bm-table tr:last-child td { border-bottom: 0; }

/* ── Sidebar nav (panel) ─────────────────── */
.bm-nav-group { display: flex; flex-direction: column; gap: 2px; }
.bm-nav-group-label {
  padding: 14px 12px 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.bm-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--slate-700);
  font-size: 14px; font-weight: 500;
  transition: background var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft);
  cursor: pointer;
  position: relative;
}
.bm-nav-item:hover { background: var(--slate-100); color: var(--ink); }
.bm-nav-item.is-active {
  background: var(--blue-50);
  color: var(--blue-700);
  font-weight: 600;
}
.bm-nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -16px; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: var(--blue-600);
}
.bm-nav-item svg { flex: 0 0 18px; width: 18px; height: 18px; }

/* ── KPI card ─────────────────── */
.bm-kpi {
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease-out-soft),
              box-shadow var(--dur) var(--ease-out-soft),
              border-color var(--dur) var(--ease-out-soft);
}
.bm-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
  border-color: var(--border-2);
}
.bm-kpi-label {
  font-size: 12.5px; font-weight: 500;
  color: var(--slate-500);
  letter-spacing: -0.005em;
}
.bm-kpi-value {
  font-size: 32px; font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 6px 0 4px;
  font-feature-settings: "tnum";
}
.bm-kpi-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600;
}
.bm-kpi-delta.is-up { color: var(--emerald-600); }
.bm-kpi-delta.is-down { color: var(--rose-700); }

/* ── Utility ─────────────────── */
.bm-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.bm-container-sm { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.bm-container-lg { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.text-muted { color: var(--slate-500); }
.text-ink { color: var(--ink); }
.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;
}

@media (max-width: 768px) {
  .bm-container, .bm-container-lg { padding: 0 20px; }
}

/* ──────────────────────────────────────────────
   Empty states & loading skeletons
   ────────────────────────────────────────────── */

/* Empty state genérico — uso: <div class="bm-empty">
     <div class="bm-empty-ico"><svg…></svg></div>
     <h3>Sin resultados</h3>
     <p>Texto descriptivo …</p>
     <button class="bm-btn bm-btn-primary">CTA opcional</button>
   </div> */
.bm-empty {
  padding: 56px 32px;
  text-align: center;
  border: 1px dashed var(--border-2, #D7DEED);
  border-radius: var(--r-lg, 16px);
  background: linear-gradient(180deg, var(--slate-50, #F8FAFC) 0%, transparent 100%);
}
.bm-empty-ico {
  width: 56px; height: 56px;
  margin: 0 auto 20px;
  border-radius: var(--r-lg, 16px);
  background: var(--slate-100, #F1F5F9);
  color: var(--slate-500, #64748B);
  display: inline-grid;
  place-items: center;
}
.bm-empty-ico svg { width: 24px; height: 24px; }
.bm-empty h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink, #0A0F1E);
  margin: 0 0 8px;
  letter-spacing: -0.015em;
}
.bm-empty p {
  font-size: 14px;
  color: var(--slate-600, #475569);
  margin: 0 auto 20px;
  max-width: 380px;
  line-height: 1.55;
}
.bm-empty .bm-btn { display: inline-flex; }

/* Skeleton loader — uso:
   <div class="bm-skeleton bm-skeleton-text" style="width:80%"></div>
   <div class="bm-skeleton bm-skeleton-block" style="height:80px"></div>
   <div class="bm-skeleton bm-skeleton-avatar"></div>
   Aplica pulse animation accesible (respeta prefers-reduced-motion). */
.bm-skeleton {
  background: linear-gradient(90deg,
    var(--slate-100, #F1F5F9) 0%,
    var(--slate-200, #E2E8F0) 50%,
    var(--slate-100, #F1F5F9) 100%);
  background-size: 200% 100%;
  animation: bmSkeletonPulse 1.6s ease-in-out infinite;
  border-radius: var(--r-sm, 8px);
  display: block;
}
.bm-skeleton-text {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.bm-skeleton-text + .bm-skeleton-text:last-child { width: 60%; }
.bm-skeleton-block { width: 100%; min-height: 60px; }
.bm-skeleton-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
}
.bm-skeleton-card {
  padding: 20px;
  border: 1px solid var(--border, #E4E9F4);
  border-radius: var(--r-lg, 16px);
  background: #fff;
}
.bm-skeleton-card .bm-skeleton + .bm-skeleton { margin-top: 10px; }

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

@media (prefers-reduced-motion: reduce) {
  .bm-skeleton {
    animation: none;
    background: var(--slate-150, #ECF0F7);
  }
}

/* ──────────────────────────────────────────────
   Hero pattern (fintech cover) y Trust bar
   audit-2026-05-18 polish fase 3: patrones de
   /home/kike/Bermatu/sistema-visual/section-cover.jsx
   ────────────────────────────────────────────── */

/* Hero con mesh + serif italic accent + grid stats abajo */
.bm-hero {
  position: relative;
  padding: 80px 32px 64px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.bm-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, rgba(36, 83, 222, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 12%, rgba(124, 92, 250, 0.12), transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 110%, rgba(83, 199, 251, 0.10), transparent 60%),
    linear-gradient(180deg, #F5F7FF 0%, #FAFBFF 60%, #FFFFFF 100%);
}
.bm-hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill, 999px);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-700);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 22px;
  box-shadow: var(--sh-1);
}
.bm-hero-kicker .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--emerald-500);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.18);
}
.bm-hero-title {
  font-family: var(--font-sans);
  font-size: var(--t-display, clamp(44px, 6.5vw, 82px));
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-weight: 800;
  color: var(--ink);
  margin: 0 auto;
  max-width: 920px;
}
.bm-hero-title .accent {
  font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--violet-500) 50%, var(--cyan-500) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 1.02em;
}
.bm-hero-lead {
  font-size: 19px;
  color: var(--slate-600);
  margin: 26px auto 0;
  max-width: 680px;
  line-height: 1.55;
}
.bm-hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.bm-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 64px auto 0;
  max-width: 880px;
}
.bm-hero-stat .stat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.bm-hero-stat .stat-value {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 6px 0 4px;
  color: var(--ink);
  font-feature-settings: "tnum";
}
.bm-hero-stat .stat-sub {
  font-size: 12px;
  color: var(--slate-600);
}
@media (max-width: 768px) {
  .bm-hero { padding: 56px 20px 48px; }
  .bm-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
}

/* Trust bar — logos + chips de validez legal */
.bm-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px 32px;
  flex-wrap: wrap;
  padding: 28px 24px;
  margin: 32px auto;
  max-width: 920px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 0.5) 100%);
}
.bm-trust-bar-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 8px;
}
.bm-trust-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--border);
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--slate-700);
  letter-spacing: 0.01em;
  box-shadow: var(--sh-1);
}
.bm-trust-chip-ok {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--emerald-50);
  color: var(--emerald-600);
  display: inline-grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
}
.bm-trust-chip-ok::before { content: "✓"; }

/* Bento grid — layout flexible para features/showcase */
.bm-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin: 48px auto;
  max-width: 1180px;
}
.bm-bento-card {
  padding: 28px;
  border-radius: var(--r-xl, 20px);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--sh-glass);
  transition: transform var(--dur) var(--ease-out-soft), box-shadow var(--dur) var(--ease-out-soft);
}
.bm-bento-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.bm-bento-span-4 { grid-column: span 4; }
.bm-bento-span-6 { grid-column: span 6; }
.bm-bento-span-8 { grid-column: span 8; }
.bm-bento-span-12 { grid-column: span 12; }
.bm-bento-tall { grid-row: span 2; }
@media (max-width: 1024px) {
  .bm-bento-span-4, .bm-bento-span-6, .bm-bento-span-8 { grid-column: span 6; }
}
@media (max-width: 640px) {
  .bm-bento { grid-template-columns: 1fr; gap: 16px; }
  .bm-bento-span-4, .bm-bento-span-6, .bm-bento-span-8, .bm-bento-span-12 { grid-column: span 1; }
}

/* Sidebar tenant chip (audit-2026-05-18 polish #6) */
.bm-tenant-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--slate-50) 0%, var(--white) 100%);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out-soft),
              box-shadow var(--dur-fast) var(--ease-out-soft);
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.bm-tenant-chip:hover {
  border-color: var(--border-2);
  box-shadow: var(--sh-1);
}
.bm-tenant-chip-logo {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--brand-tenant, var(--blue-500)) 0%, var(--violet-500) 100%);
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 32px;
  overflow: hidden;
}
.bm-tenant-chip-logo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.bm-tenant-chip-body { flex: 1; min-width: 0; }
.bm-tenant-chip-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.bm-tenant-chip-status {
  font-size: 11px;
  color: var(--slate-500);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.bm-tenant-chip-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--emerald-500);
  box-shadow: 0 0 0 2px rgba(16,185,129,0.18);
}
.bm-tenant-chip-caret {
  color: var(--slate-400);
  flex: 0 0 14px;
}

/* ──────────────────────────────────────────────
   Reveal animations (audit polish: variantes IO-driven)
   ────────────────────────────────────────────── */
.bm-fade-up { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); }
.bm-fade-up.is-visible { opacity: 1; transform: none; }

.bm-fade-right { opacity: 0; transform: translateX(-18px); transition: opacity 0.55s var(--ease-out-expo), transform 0.55s var(--ease-out-expo); }
.bm-fade-right.is-visible { opacity: 1; transform: none; }

.bm-fade-left { opacity: 0; transform: translateX(18px); transition: opacity 0.55s var(--ease-out-expo), transform 0.55s var(--ease-out-expo); }
.bm-fade-left.is-visible { opacity: 1; transform: none; }

.bm-scale-in { opacity: 0; transform: scale(0.94); transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo); }
.bm-scale-in.is-visible { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .bm-fade-up, .bm-fade-right, .bm-fade-left, .bm-scale-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ──────────────────────────────────────────────
   Polish micro: badge con dot pulse + divider gradient + code inline
   ────────────────────────────────────────────── */

/* Badge live (indicador status en tiempo real) */
.bm-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 600;
  background: var(--emerald-50);
  color: var(--emerald-600);
  letter-spacing: -0.005em;
}
.bm-badge-live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--emerald-500);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  animation: bmDotPulse 2s ease-in-out infinite;
}
.bm-badge-live.is-warn { background: var(--amber-50); color: #B45309; }
.bm-badge-live.is-warn::before { background: var(--amber-500); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
.bm-badge-live.is-danger { background: var(--rose-50); color: var(--rose-700); }
.bm-badge-live.is-danger::before { background: var(--rose-600); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
@keyframes bmDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50% { box-shadow: 0 0 0 4px transparent; opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-badge-live::before { animation: none; }
}

/* Divider con gradient suave (vs hr plano) */
.bm-divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent 0%, var(--border) 25%, var(--border) 75%, transparent 100%);
  margin: 24px 0;
}
.bm-divider-strong {
  background: linear-gradient(90deg, transparent 0%, var(--border-2, #D7DEED) 25%, var(--border-2, #D7DEED) 75%, transparent 100%);
}

/* Code inline polish */
.bm-code, code.bm {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--slate-100);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--blue-700);
  letter-spacing: -0.01em;
}

/* Code block (pre code) */
.bm-codeblock {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--slate-900);
  color: #E2E8F0;
  padding: 16px 18px;
  border-radius: var(--r-md);
  overflow-x: auto;
  line-height: 1.55;
}
.bm-codeblock .tok-string { color: #A7F3D0; }
.bm-codeblock .tok-keyword { color: #93C5FD; }
.bm-codeblock .tok-comment { color: #94A3B8; font-style: italic; }

/* Kbd polish */
.bm-kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--white);
  border: 1px solid var(--border-2, #D7DEED);
  border-bottom-width: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-700);
  line-height: 1;
  min-width: 18px;
  justify-content: center;
}

/* ──────────────────────────────────────────────
   Dark mode (admin only) — opt-in con data-theme="dark"
   ────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --paper: #0A0F1E;
  --white: #111733;
  --slate-50: #1A2142;
  --slate-100: #1E293B;
  --slate-150: #2A3654;
  --slate-200: #334155;
  --slate-300: #475569;
  --slate-400: #64748B;
  --slate-500: #94A3B8;
  --slate-600: #CBD5E1;
  --slate-700: #E2E8F0;
  --slate-800: #F1F5F9;
  --slate-900: #F8FAFC;
  --ink: #F8FAFC;
  --text: #F8FAFC;
  --text-2: #CBD5E1;
  --text-3: #94A3B8;
  --border: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.24);
  --bg: var(--paper);
  --bg-tint: #111733;
  --surface: #1A2142;
  --glass-bg: rgba(26, 33, 66, 0.62);
  --glass-bg-strong: rgba(26, 33, 66, 0.82);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-stroke: rgba(255, 255, 255, 0.04);
  /* Brand sigue siendo --blue-* (legible sobre dark) */
  /* Shadows ajustados para fondo oscuro */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --sh-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
  --sh-3: 0 4px 8px rgba(0, 0, 0, 0.35), 0 12px 28px -6px rgba(0, 0, 0, 0.4);
  --sh-4: 0 8px 16px rgba(0, 0, 0, 0.4), 0 24px 48px -12px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] body {
  background: var(--paper);
  color: var(--text);
}
:root[data-theme="dark"] .bm-card,
:root[data-theme="dark"] .bm-kpi {
  background: var(--surface);
}
:root[data-theme="dark"] .bm-input {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-2);
}
:root[data-theme="dark"] .bm-input:focus {
  background: var(--white);
}

/* Dark mode toggle button styling */
.bm-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: var(--slate-50);
  border: 1px solid var(--border);
  color: var(--slate-600);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out-soft);
}
.bm-theme-toggle:hover { background: var(--slate-100); color: var(--ink); }
.bm-theme-toggle svg { width: 16px; height: 16px; }
.bm-theme-toggle .bm-theme-icon-dark { display: none; }
:root[data-theme="dark"] .bm-theme-toggle .bm-theme-icon-light { display: none; }
:root[data-theme="dark"] .bm-theme-toggle .bm-theme-icon-dark { display: inline-block; }

/* ──────────────────────────────────────────────
   Tooltip pattern (CSS-only, sin JS)
   ────────────────────────────────────────────── */
.bm-tooltip {
  position: relative;
  display: inline-flex;
}
.bm-tooltip::before,
.bm-tooltip::after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease-out-soft), transform 0.18s var(--ease-out-soft);
  z-index: var(--z-toast, 200);
}
.bm-tooltip::before {
  content: attr(data-tip);
  margin-bottom: 8px;
  padding: 5px 10px;
  background: var(--ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: var(--r-sm, 8px);
  white-space: nowrap;
  letter-spacing: -0.005em;
  box-shadow: var(--sh-3);
  font-family: var(--font-sans);
}
.bm-tooltip::after {
  content: "";
  margin-bottom: 4px;
  width: 0; height: 0;
  border: 4px solid transparent;
  border-top-color: var(--ink);
}
.bm-tooltip:hover::before,
.bm-tooltip:hover::after,
.bm-tooltip:focus::before,
.bm-tooltip:focus::after,
.bm-tooltip:focus-within::before,
.bm-tooltip:focus-within::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Posiciones alternativas via data-tip-pos */
.bm-tooltip[data-tip-pos="bottom"]::before,
.bm-tooltip[data-tip-pos="bottom"]::after {
  bottom: auto;
  top: 100%;
  transform: translateX(-50%) translateY(-4px);
}
.bm-tooltip[data-tip-pos="bottom"]::before { margin-top: 8px; margin-bottom: 0; }
.bm-tooltip[data-tip-pos="bottom"]::after {
  margin-top: 4px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-bottom-color: var(--ink);
}
.bm-tooltip[data-tip-pos="bottom"]:hover::before,
.bm-tooltip[data-tip-pos="bottom"]:hover::after { transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .bm-tooltip::before, .bm-tooltip::after { transition: opacity 0.15s; }
}