/* ============================================================================
   biter-ui.css — sistema de diseño BITER 3.0 (D-08, etapa 1)
   ----------------------------------------------------------------------------
   Un solo archivo, sin compilación. Tokens (§2) y componentes (§3) de
   BITER-3.0-SISTEMA-DISENO.md. Hoy vive en Dirac; en la etapa 2 pasa al paquete
   compartido y los módulos lo cargan tal cual.

   Convenciones
     - Tokens:        --b-*            (color, tipografía, espacio, forma)
     - Componentes:   .b-<nombre>      (b-btn, b-card, b-pill, b-table…)
     - Modificadores: .b-btn.primary   (sin prefijo, siempre junto al componente)
     - Estado:        .is-ok .is-warn .is-crit .is-info .is-none
                      (definen --s / --s-ink / --s-bg / --s-line y cualquier
                       componente los toma: punto, pastilla, aviso, tarjeta…)
   ============================================================================ */

:root {
  /* color base */
  --b-bg:#fafaf7; --b-card:#fff; --b-line:#e6e5df; --b-line-soft:#f6f5f0;
  --b-ink:#1a1a19; --b-mut:#6b6b66; --b-faint:#b9b8b2;
  --b-brand:#0f2a44; --b-brand-2:#12324f; --b-accent:#185fa5; --b-accent-ink:#15507f; --b-accent-soft:#eaf1fb;
  /* estado: sólido · texto · fondo · borde */
  --b-ok:#0ca30c;   --b-ok-ink:#1c7a3a;   --b-ok-bg:#eaf7ee;   --b-ok-line:#bfe6cb;
  --b-warn:#c98500; --b-warn-ink:#8a5a00; --b-warn-bg:#fff5e6; --b-warn-line:#f0dab0;
  --b-crit:#d03b3b; --b-crit-ink:#a3271f; --b-crit-bg:#fdeceb; --b-crit-line:#f3c9c6;
  --b-info:#185fa5; --b-info-ink:#185fa5; --b-info-bg:#eaf1fb; --b-info-line:#d5e3f5;
  --b-none:#898781; --b-none-ink:#8a8a80; --b-none-bg:#f0efe9; --b-none-line:#e3e3e0;
  /* tipografía */
  --b-font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --b-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --b-fs-xs:11px; --b-fs-sm:12px; --b-fs-md:13px; --b-fs-base:14px; --b-fs-lg:16px;
  --b-fs-xl:20px; --b-fs-2xl:24px; --b-fs-3xl:32px;
  /* espacio y forma */
  --b-sp-1:4px; --b-sp-2:8px; --b-sp-3:12px; --b-sp-4:16px; --b-sp-5:20px; --b-sp-6:24px; --b-sp-7:32px;
  --b-r-sm:6px; --b-r:8px; --b-r-lg:12px; --b-r-pill:999px;
  --b-shadow-pop:0 8px 24px rgba(15,42,68,.14);
  --b-side-w:236px;
  /* compatibilidad con las variables históricas de Dirac y de los módulos
     que copiaron su :root (SLA, Capacity, ADM, BSC). Se retiran en la etapa 2. */
  --bg:var(--b-bg); --card:var(--b-card); --line:var(--b-line); --ink:var(--b-ink);
  --mut:var(--b-mut); --accent:var(--b-accent); --side:var(--b-brand-2);
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }
body.b-ui { margin:0; background:var(--b-bg); color:var(--b-ink); font:400 var(--b-fs-base)/1.45 var(--b-font); }
.b-ui a { color:inherit; }
.b-ui h1, .b-ui h2, .b-ui h3 { line-height:1.15; text-wrap:balance; }
.b-content h1, .b-h1 { font-size:var(--b-fs-xl); font-weight:600; margin:0 0 var(--b-sp-1); }
.b-content h2, .b-h2 { font-size:var(--b-fs-lg); font-weight:600; margin:28px 0 var(--b-sp-3); }
.b-content h2:first-child, .b-h2:first-child { margin-top:0; }
.b-lead { color:var(--b-mut); font-size:var(--b-fs-md); margin:0 0 18px; }
.b-mut { color:var(--b-mut); }
.b-mono { font-family:var(--b-mono); font-size:var(--b-fs-sm); }
.b-num { font-variant-numeric:tabular-nums; }
.b-hint { font-size:var(--b-fs-sm); color:var(--b-mut); margin-top:var(--b-sp-1); }
.b-ui :focus-visible { outline:2px solid rgba(24,95,165,.4); outline-offset:1px; }

/* estado: las cinco tonalidades, aplicables a cualquier componente */
.is-ok   { --s:var(--b-ok);   --s-ink:var(--b-ok-ink);   --s-bg:var(--b-ok-bg);   --s-line:var(--b-ok-line); }
.is-warn { --s:var(--b-warn); --s-ink:var(--b-warn-ink); --s-bg:var(--b-warn-bg); --s-line:var(--b-warn-line); }
.is-crit { --s:var(--b-crit); --s-ink:var(--b-crit-ink); --s-bg:var(--b-crit-bg); --s-line:var(--b-crit-line); }
.is-info { --s:var(--b-info); --s-ink:var(--b-info-ink); --s-bg:var(--b-info-bg); --s-line:var(--b-info-line); }
.is-none { --s:var(--b-none); --s-ink:var(--b-none-ink); --s-bg:var(--b-none-bg); --s-line:var(--b-none-line); }
.b-ink-s { color:var(--s-ink); }          /* texto con el color del estado */
.b-solid-s { color:var(--s); }            /* cifra grande con el color sólido del estado */

/* ── 1 · shell: barra lateral + topbar + contenido ────────────────────────── */
.b-shell { display:grid; grid-template-columns:var(--b-side-w) 1fr; min-height:100vh; }
.b-side { background:var(--b-brand-2); color:#cdddec; display:flex; flex-direction:column; }
.b-side .brand { display:block; padding:18px 20px 14px; color:#fff; text-decoration:none; font-weight:700; font-size:var(--b-fs-lg); letter-spacing:.3px; }
.b-side .brand small { display:block; color:#93b4d6; font-weight:400; font-size:var(--b-fs-sm); margin-top:2px; }
.b-side nav { padding:var(--b-sp-2) var(--b-sp-3); flex:1; }
.b-side .grp { font-size:var(--b-fs-xs); text-transform:uppercase; letter-spacing:.6px; color:#7fa2c6; margin:var(--b-sp-4) 10px var(--b-sp-2); }
.b-side .grp.danger { color:#e79a92; }
.b-side nav a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--b-r); text-decoration:none; color:#cdddec; font-size:var(--b-fs-base); margin-bottom:2px; }
.b-side nav a .ic { width:18px; text-align:center; font-size:15px; }
.b-side nav a:hover { background:rgba(255,255,255,.07); color:#fff; }
.b-side nav a.on { background:var(--b-accent); color:#fff; font-weight:600; }
.b-side nav a.danger { color:#f0b7b0; }
.b-side nav a.danger.on { background:var(--b-crit); color:#fff; }
.b-side .foot { border-top:1px solid rgba(255,255,255,.1); padding:var(--b-sp-3) var(--b-sp-4); font-size:var(--b-fs-md); }
.b-side .foot b { color:#fff; font-weight:600; }
.b-side .foot small { display:block; color:#93b4d6; font-size:var(--b-fs-sm); }
.b-side .foot form { margin-top:var(--b-sp-2); }
.b-side .foot button { background:none; border:1px solid rgba(255,255,255,.22); color:#cfe0f0; border-radius:7px; padding:6px 12px; font:inherit; font-size:var(--b-fs-md); cursor:pointer; }
.b-side .foot button:hover { background:rgba(255,255,255,.08); }
.b-main { display:flex; flex-direction:column; min-width:0; }
.b-topbar { background:var(--b-card); border-bottom:1px solid var(--b-line); padding:var(--b-sp-3) 26px; display:flex; align-items:center; gap:var(--b-sp-3); }
.b-topbar .crumb { font-size:var(--b-fs-md); color:var(--b-mut); }
.b-topbar .brand { font-weight:600; text-decoration:none; font-size:15px; padding:var(--b-sp-1) 0; }
.b-topbar .brand small { color:var(--b-mut); font-weight:400; }
.b-topbar .right { margin-left:auto; display:flex; align-items:center; gap:var(--b-sp-4); font-size:var(--b-fs-md); color:var(--b-mut); }
.b-topbar .right a { text-decoration:none; }
.b-topbar .right a.accent { color:var(--b-accent); }
.b-topbar .right form { display:inline; }
.b-topbar .right button { border:none; background:none; color:var(--b-mut); cursor:pointer; font:inherit; font-size:var(--b-fs-md); padding:0; }
.b-live { display:inline-flex; align-items:center; gap:6px; font-size:var(--b-fs-sm); color:var(--b-mut); }
.b-live i { width:8px; height:8px; border-radius:50%; background:var(--b-ok); box-shadow:0 0 0 3px rgba(12,163,12,.15); }
.b-content { padding:26px; max-width:1080px; width:100%; }
.b-content.wide { max-width:1180px; margin:0 auto; }
.b-content.narrow { max-width:620px; margin:0 auto; }
.b-page-head { display:flex; align-items:center; gap:var(--b-sp-3); margin-bottom:var(--b-sp-4); }
.b-page-head h1, .b-page-head h2 { margin:0; }
.b-mla { margin-left:auto; }

/* ── 15 · chip de cliente ─────────────────────────────────────────────────── */
.b-chip { display:inline-block; font-size:12.5px; color:var(--b-accent); background:var(--b-accent-soft); border:1px solid var(--b-info-line); border-radius:var(--b-r-pill); padding:3px 11px; white-space:nowrap; }

/* ── 3 · tarjeta ──────────────────────────────────────────────────────────── */
.b-card { background:var(--b-card); border:1px solid var(--b-line); border-radius:var(--b-r-lg); overflow:hidden; }
.b-card.pad { padding:22px; }
.b-card.edge { border-left:4px solid var(--s,var(--b-line)); }
.b-card.tone { border-color:var(--s-line); }          /* borde con el color del estado */
.b-card.scroll { overflow-x:auto; }
.b-card.flat { padding:0; }
.b-card-title { font-size:15px; font-weight:600; margin:0 0 var(--b-sp-2); }
.b-card-title.row { display:flex; align-items:center; gap:var(--b-sp-2); }

/* ── 11 · banner de estado ────────────────────────────────────────────────── */
.b-banner { display:flex; align-items:center; gap:var(--b-sp-3); border-radius:10px; padding:10px 15px; margin-bottom:var(--b-sp-4); border:1px solid var(--b-line); background:var(--b-card); }
.b-banner .b-dot { width:12px; height:12px; }
.b-banner small { display:block; color:var(--b-mut); font-size:var(--b-fs-sm); margin-top:1px; }
.b-banner.solid { background:var(--s-bg); border-color:var(--s-line); color:var(--s-ink); }

/* ── 5 · estado (punto + texto) ───────────────────────────────────────────── */
.b-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; background:var(--s,var(--b-none)); margin-right:5px; vertical-align:middle; }
.b-dot.halo { box-shadow:0 0 0 3px color-mix(in srgb, var(--s,var(--b-none)) 15%, transparent); margin:0; }
.b-status { display:inline-flex; align-items:center; gap:5px; font-size:var(--b-fs-xs); white-space:nowrap; color:var(--s-ink,var(--b-mut)); }
.b-status .b-dot { width:9px; height:9px; margin:0; }

/* ── 6 · pastilla · etiqueta · contador ───────────────────────────────────── */
.b-pill { display:inline-block; padding:2px 9px; border-radius:var(--b-r-pill); font-size:var(--b-fs-sm); background:var(--s-bg,#eef2f7); color:var(--s-ink,#334455); white-space:nowrap; line-height:1.5; }
.b-tag { display:inline-block; padding:1px 7px; border-radius:var(--b-r-sm); font-size:var(--b-fs-sm); background:var(--s-bg,#eef2f7); color:var(--s-ink,#334455); margin:1px; }
.b-count { display:inline-block; background:var(--s,var(--b-crit)); color:#fff; font-size:var(--b-fs-xs); font-weight:700; border-radius:var(--b-r-pill); padding:0 7px; line-height:17px; vertical-align:middle; }
.b-pill.outline { border:1px solid var(--s-line); }
.b-btn.tone { border-color:var(--s-line); color:var(--s-ink); }
.b-pill.lg { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; font-size:var(--b-fs-md); border-radius:var(--b-r); }
.b-big { font-size:var(--b-fs-3xl); font-weight:700; letter-spacing:-.5px; line-height:1.1; font-variant-numeric:tabular-nums; }
.b-sq { display:inline-block; width:10px; height:10px; border-radius:2px; background:var(--s,var(--b-none)); margin-right:4px; vertical-align:middle; }
.b-sq.soft { background:var(--s-bg); border:1px solid var(--s-line); }
.b-side nav a .b-count { margin-left:auto; }

/* ── 7 · botón ────────────────────────────────────────────────────────────── */
.b-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 14px; border-radius:var(--b-r); border:1px solid var(--b-line); background:var(--b-card); color:var(--b-ink); text-decoration:none; font:inherit; font-size:var(--b-fs-base); cursor:pointer; line-height:1.2; white-space:nowrap; }
.b-btn:hover { background:var(--b-line-soft); }
.b-btn.primary { background:var(--b-accent); color:#fff; border-color:var(--b-accent); font-weight:600; }
.b-btn.primary:hover { background:var(--b-accent-ink); }
.b-btn.danger { color:var(--b-crit-ink); border-color:var(--b-crit-line); }
.b-btn.danger:hover { background:var(--b-crit-bg); }
.b-btn.danger.solid { background:#c0392b; color:#fff; border-color:#c0392b; }
.b-btn.danger.solid:hover { background:var(--b-crit-ink); }
.b-btn.danger.solid:disabled { background:#e6b3ac; border-color:#e6b3ac; cursor:not-allowed; }
.b-btn.ghost { border-color:transparent; background:transparent; color:var(--b-accent); }
.b-btn.sm { padding:4px 10px; font-size:var(--b-fs-md); }
.b-btn.block { width:100%; }
.b-btn[disabled], .b-btn.disabled { color:var(--b-faint); border-color:var(--b-line); background:var(--b-card); pointer-events:none; font-weight:400; }
.b-btn.link { border:none; background:none; color:var(--b-accent); padding:0; font-size:inherit; }
.b-inline { display:inline; }

/* ── 8 · tabla ────────────────────────────────────────────────────────────── */
.b-table { width:100%; border-collapse:collapse; font-size:var(--b-fs-base); }
.b-table th, .b-table td { text-align:left; padding:10px 14px; border-bottom:1px solid #eee; vertical-align:middle; }
.b-table thead th { color:var(--b-mut); font-weight:500; background:var(--b-line-soft); font-size:var(--b-fs-md); }
.b-table tbody tr:last-child td { border-bottom:0; }
.b-table td.num, .b-table th.num, .b-table .r { text-align:right; font-variant-numeric:tabular-nums; }
.b-table td.acts { text-align:right; white-space:nowrap; }
.b-table td.empty { padding:22px; color:var(--b-mut); }
.b-table tr.dim td { opacity:.5; }
.b-table tr.hl td { background:#fffaf0; }
.b-table .sub { display:block; color:var(--b-mut); font-size:var(--b-fs-sm); }
.b-table input[type=number] { width:68px; }

/* ── 9 · formulario ───────────────────────────────────────────────────────── */
.b-form label, .b-field > span { display:block; font-size:var(--b-fs-md); color:var(--b-mut); margin:13px 0 5px; }
.b-form label:first-child { margin-top:0; }
.b-form input[type=text], .b-form input[type=email], .b-form input[type=url], .b-form input[type=password],
.b-form input[type=number], .b-form input[type=time], .b-form select, .b-form textarea,
.b-field input, .b-field select, .b-field textarea {
  width:100%; padding:10px 11px; border:1px solid var(--b-line); border-radius:var(--b-r); font:inherit; font-size:var(--b-fs-base); background:var(--b-card); color:var(--b-ink); }
.b-form input:focus, .b-form select:focus, .b-form textarea:focus, .b-field :focus { outline:2px solid rgba(24,95,165,.25); border-color:var(--b-accent); }
.b-form input:disabled { background:#f4f4f1; color:var(--b-mut); }
.b-form textarea { min-height:74px; resize:vertical; }
.b-form input.auto, .b-form select.auto { width:auto; }
.b-form input.is-crit { border-color:var(--b-crit); }
.b-row { display:flex; gap:14px; } .b-row > div { flex:1; }
.b-check { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:var(--b-fs-base); color:var(--b-ink); }
.b-check input { width:auto; margin:0; }
.b-check.top { align-items:flex-start; } .b-check.top input { margin-top:3px; }
.b-sect { margin-top:22px; padding-top:var(--b-sp-4); border-top:1px solid var(--b-line); }
.b-sect > .lbl, .b-sect.hd { font-size:var(--b-fs-base); font-weight:600; color:var(--b-ink); }
.b-sect.hd { margin-top:0; padding-top:0; border-top:0; }
.b-choices { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:10px; }
.b-choice { display:flex; align-items:center; gap:8px; padding:9px 11px; border:1px solid var(--b-line); border-radius:var(--b-r); font-size:13.5px; cursor:pointer; background:var(--b-card); margin:0; color:var(--b-ink); }
.b-choice:hover { background:var(--b-line-soft); } .b-choice input { width:auto; margin:0; }
.b-choice.top { align-items:flex-start; } .b-choice.top input { margin-top:2px; }
.b-actions { margin-top:22px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.b-filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; align-items:center; }
.b-filters input, .b-filters select { width:auto; } .b-filters input.grow { flex:1; min-width:200px; }
.b-form.narrow, .b-card.narrow { max-width:640px; }
.b-form.mid, .b-card.mid { max-width:820px; }

/* ── 10 · aviso ───────────────────────────────────────────────────────────── */
.b-flash { border-radius:var(--b-r); padding:9px 12px; font-size:var(--b-fs-md); margin-bottom:var(--b-sp-4); background:var(--s-bg,var(--b-info-bg)); color:var(--s-ink,var(--b-info-ink)); border:1px solid var(--s-line,var(--b-info-line)); }
.b-flash.lg { padding:14px 16px; font-size:var(--b-fs-base); border-radius:10px; }
.b-flash b { color:inherit; }

/* ── 4 · tarjeta KPI · métrica · barra · minis ────────────────────────────── */
.b-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--b-sp-3); }
.b-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:1080px) { .b-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:800px)  { .b-grid, .b-grid.cols-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px)  { .b-grid, .b-grid.cols-3 { grid-template-columns:1fr; } }
.b-kpi { position:relative; background:var(--b-card); border:1px solid var(--b-line); border-left:4px solid var(--s,var(--b-line)); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; min-height:148px; }
.b-kpi .head { display:flex; align-items:flex-start; gap:9px; }
.b-kpi .icon { font-size:18px; line-height:1; }
.b-kpi .name { font-weight:600; font-size:var(--b-fs-base); }
.b-kpi .desc { color:var(--b-mut); font-size:var(--b-fs-xs); margin-top:2px; line-height:1.3; }
.b-kpi .head .b-status { margin-left:auto; }
.b-kpi .val { font-size:22px; font-weight:700; letter-spacing:-.4px; line-height:1; margin:9px 0 2px; font-variant-numeric:tabular-nums; }
.b-kpi .lab { color:var(--b-mut); font-size:var(--b-fs-xs); }
.b-kpi .stats { display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--b-sp-2); font-size:var(--b-fs-sm); }
.b-kpi .stats b { font-weight:600; }
.b-kpi .foot { margin-top:auto; padding-top:10px; display:flex; align-items:center; gap:var(--b-sp-2); flex-wrap:wrap; }
.b-kpi .foot .b-btn { padding:6px 12px; font-size:var(--b-fs-md); }
.b-kpi .foot .stale { font-size:10.5px; color:var(--b-mut); }
.b-kpi.soon .val, .b-kpi.off .val { color:var(--b-mut); }
.b-kpi .soonpill { position:absolute; top:11px; right:11px; }
.b-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:820px) { .b-metrics { grid-template-columns:1fr; } }
.b-metric { background:var(--b-card); border:1px solid var(--b-line); border-radius:var(--b-r-lg); padding:16px 18px; }
.b-metric .top { display:flex; align-items:baseline; gap:8px; }
.b-metric .lab { font-size:var(--b-fs-md); color:var(--b-mut); }
.b-metric .big { font-size:30px; font-weight:700; letter-spacing:-.5px; margin-left:auto; color:var(--s,var(--b-ink)); font-variant-numeric:tabular-nums; }
.b-metric .sub { font-size:12.5px; color:var(--b-mut); margin-top:2px; }
.b-bar { height:9px; border-radius:6px; background:#eceae3; overflow:hidden; margin-top:12px; }
.b-bar > span, .b-bar > div { display:block; height:100%; border-radius:6px; background:var(--s,var(--b-accent)); transition:width .4s; }
.b-bar.thick { height:16px; border-radius:8px; margin:8px 0; }
.b-bar.thin { height:8px; margin:0; }
.b-minis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px; }
@media (max-width:820px) { .b-minis { grid-template-columns:repeat(2,1fr); } }
.b-mini { background:var(--b-card); border:1px solid var(--b-line); border-radius:var(--b-r-lg); padding:14px 16px; }
.b-mini .n { font-size:22px; font-weight:700; color:var(--s,var(--b-ink)); font-variant-numeric:tabular-nums; }
.b-mini .l { font-size:var(--b-fs-sm); color:var(--b-mut); margin-top:2px; }

/* ── 12 · vacío ───────────────────────────────────────────────────────────── */
.b-empty { text-align:center; padding:var(--b-sp-7) var(--b-sp-4); color:var(--b-mut); }
.b-empty .ic { font-size:28px; margin-bottom:var(--b-sp-2); }
.b-empty p { margin:0 0 var(--b-sp-3); font-size:var(--b-fs-base); }

/* ── 14 · pestañas ────────────────────────────────────────────────────────── */
.b-tabs { display:flex; gap:2px; border-bottom:1px solid var(--b-line); margin:6px 0 20px; flex-wrap:wrap; }
.b-tabs a, .b-tabs button { background:none; border:none; padding:10px 16px; font:inherit; font-size:var(--b-fs-base); color:var(--b-mut); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none; border-radius:var(--b-r) var(--b-r) 0 0; }
.b-tabs a:hover, .b-tabs button:hover { color:var(--b-ink); background:var(--b-line-soft); }
.b-tabs a.on, .b-tabs button.on { color:var(--b-accent); border-bottom-color:var(--b-accent); font-weight:600; }
.b-tabpanel { display:none; } .b-tabpanel.on { display:block; }

/* ── 13 · página centrada (auth, OTP, sin acceso) ─────────────────────────── */
.b-center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--b-sp-6); }
.b-center .b-card { width:100%; max-width:400px; padding:28px; border-radius:14px; }
.b-center .brand { font-weight:700; font-size:18px; margin:0 0 2px; }
.b-center .brand small { color:var(--b-mut); font-weight:400; font-size:var(--b-fs-md); }
.b-center h1 { font-size:var(--b-fs-lg); font-weight:600; margin:18px 0 6px; }
.b-center .intro { color:var(--b-mut); font-size:var(--b-fs-md); margin:0 0 14px; }
.b-center .intro b { color:var(--b-ink); }
.b-center .foot { margin-top:var(--b-sp-4); font-size:var(--b-fs-md); text-align:center; color:var(--b-mut); }
.b-center .foot a, .b-center .foot .b-btn.link { color:var(--b-accent); text-decoration:none; font-size:var(--b-fs-md); }
.b-center .b-btn.block { margin-top:18px; padding:10px 14px; }
.b-code input { font-size:22px; letter-spacing:8px; text-align:center; padding:12px; }
.b-form input.b-otp { max-width:130px; letter-spacing:4px; text-align:center; font-size:var(--b-fs-lg); }
.b-form .b-checkline { display:flex; align-items:center; gap:7px; margin-top:12px; font-size:var(--b-fs-md); color:var(--b-mut); }
.b-checkline input { width:auto; margin:0; }

/* ── detalles plegables ───────────────────────────────────────────────────── */
details.b-fold > summary { cursor:pointer; color:var(--b-accent); font-size:var(--b-fs-md); font-weight:600; list-style:none; }
details.b-fold > summary::-webkit-details-marker { display:none; }

/* ── utilidades mínimas de espacio ────────────────────────────────────────── */
.b-mt-1 { margin-top:var(--b-sp-1); } .b-mt-2 { margin-top:var(--b-sp-2); } .b-mt-3 { margin-top:var(--b-sp-3); }
.b-mt-4 { margin-top:var(--b-sp-4); } .b-mt-6 { margin-top:var(--b-sp-6); } .b-mt-0 { margin-top:0; }
.b-mb-2 { margin-bottom:var(--b-sp-2); } .b-mb-3 { margin-bottom:var(--b-sp-3); } .b-mb-4 { margin-bottom:var(--b-sp-4); } .b-mb-0 { margin-bottom:0; }
.b-sm { font-size:var(--b-fs-sm); } .b-md { font-size:var(--b-fs-md); }
.b-b { font-weight:600; } .b-accent { color:var(--b-accent); }
.b-tc { text-align:center; } .b-tr { text-align:right; } .b-nowrap { white-space:nowrap; }
.b-flex { display:flex; align-items:center; gap:var(--b-sp-2); flex-wrap:wrap; }
.b-topnav { display:flex; gap:4px; margin-left:auto; }
.b-topnav a { padding:16px 14px; color:var(--b-mut); text-decoration:none; border-bottom:2px solid transparent; font-size:var(--b-fs-base); display:inline-flex; align-items:center; gap:4px; }
.b-topnav a.active, .b-topnav a.on { color:var(--b-accent); border-bottom-color:var(--b-accent); font-weight:500; }
.b-topnav a.disabled { color:var(--b-faint); cursor:default; }
.b-seg { display:inline-flex; border:1px solid var(--b-line); border-radius:var(--b-r); overflow:hidden; }
.b-seg a, .b-seg button { padding:6px 12px; font-size:var(--b-fs-md); text-decoration:none; color:var(--b-mut); background:var(--b-card); border:0; font-family:inherit; cursor:pointer; }
.b-seg a.active, .b-seg a.on, .b-seg button.on { background:var(--b-accent); color:#fff; }
.b-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.b-table.nowrap th, .b-table.nowrap td { white-space:nowrap; }
.b-table tr.rowlink { cursor:pointer; } .b-table tr.rowlink:hover td { background:var(--b-line-soft); }
.b-row.cols { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.b-inline-form { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.b-inline-form > div { flex:1; min-width:160px; }

/* ── responsivo ───────────────────────────────────────────────────────────── */
@media (max-width:760px) {
  .b-shell { grid-template-columns:1fr; }
  .b-side { flex-direction:row; flex-wrap:wrap; align-items:center; }
  .b-side .brand { padding:12px 16px; }
  .b-side nav { display:flex; flex-wrap:wrap; padding:4px 8px; gap:4px; flex:1 100%; }
  .b-side .grp { display:none; }
  .b-side nav a { margin:0; }
  .b-side .foot { border:none; padding:8px 16px; }
  .b-row { flex-direction:column; gap:0; }
  .b-choices { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:no-preference) {
  .b-live i { animation:b-pulse 2s infinite; }
}
@keyframes b-pulse { 50% { box-shadow:0 0 0 5px rgba(12,163,12,.08); } }

/* ── versión (norma de versionamiento; componente común de la suite): «v1.2.0» y «+N» cambios posteriores ── */
.b-ver { font-family:var(--b-mono); font-size:var(--b-fs-xs); color:var(--b-mut); font-weight:400; white-space:nowrap; }
.b-ver small { margin-left:1px; font-size:.85em; opacity:.8; }
.b-suite { display:inline-flex; align-items:center; gap:5px; font-size:var(--b-fs-sm); color:var(--b-mut); text-decoration:none;
  border:1px solid var(--b-line); border-radius:999px; padding:2px 10px; background:var(--b-card); }
.b-suite .b-ver { font-size:var(--b-fs-sm); color:var(--b-ink); font-weight:600; }
a.b-suite:hover { border-color:var(--b-accent); }
.b-mini .n .b-ver { font-size:inherit; color:inherit; font-weight:inherit; }