/* El marco de Burocracks fuera del ERP: la barra de arriba y la entrada. */
.bk-barra{position:fixed;top:0;left:0;right:0;height:46px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;background:var(--negro,#1a1a1a);color:#f8f6f1;z-index:150;font-family:sans-serif}
.bk-marca{font-family:Georgia,serif;font-size:18px;font-weight:700;letter-spacing:.3px}
.bk-derecha{display:flex;align-items:center;gap:12px;font-size:13px}
.bk-derecha .bs{padding:4px 12px;font-size:12px}
#bk-entrada{display:flex;justify-content:center;padding:60px 16px}
.bk-tarjeta{width:100%;max-width:360px;background:var(--sup,#fff);border:1px solid var(--borde,#e5e2da);border-radius:12px;
  padding:24px;display:flex;flex-direction:column;gap:8px;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.bk-titulo{font-family:Georgia,serif;font-size:20px;font-weight:700;margin-bottom:8px}
.bk-etiqueta{font-size:12.5px;color:var(--txt2,#555);font-family:sans-serif}
.bk-error{min-height:18px;font-size:12.5px;color:var(--rojo,#c0392b);font-family:sans-serif}
#bk-entrar{margin-top:6px}
.bk-recordar{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--txt2,#555);font-family:sans-serif;margin-top:2px;cursor:pointer}
.bk-recordar input{margin:0;width:16px;height:16px}
/* Ya dentro, la marca la pone la barra negra de las pantallas (la misma que en
   el ERP). Aquí arriba queda una tira clara con quién eres y tus botones: si no,
   salen dos barras negras una encima de otra. */
body.bk-dentro{padding-top:0}
body.bk-dentro .bk-barra{position:static;height:auto;background:transparent;color:var(--txt2,#555);
  max-width:1400px;margin:0 auto;padding:8px 16px 0;justify-content:flex-end}
body.bk-dentro .bk-marca{display:none}
body.bk-dentro #bk-app{padding-top:6px}
#bk-app{padding:12px 16px 40px;max-width:1400px;margin:0 auto}
.bk-sub{font-size:13px;color:var(--txt2,#555);font-family:sans-serif;margin:-4px 0 8px}
.bk-pie{font-size:12.5px;color:var(--txt2,#555);font-family:sans-serif;margin-top:6px;text-decoration:none}
a.bk-pie:hover{text-decoration:underline}
.bk-campos{display:flex;flex-direction:column;gap:6px}
.bk-empresa{border-top:1px solid var(--borde,#e5e2da);padding:10px 0;display:flex;flex-direction:column;gap:6px}
.bk-cuenta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:13px;font-family:sans-serif}
.bk-hecho{border-left:4px solid var(--bc-hecho,#2e7d32);background:var(--sup2,#f6f4ef);padding:10px 12px;margin-bottom:12px;font-family:sans-serif;font-size:13px}
.bk-hecho pre{white-space:pre-wrap;background:#fff;border:1px solid var(--borde,#e5e2da);padding:8px;margin:8px 0;font-size:13px}
@media (max-width:640px){
  .bk-barra{padding:0 10px}
  body.bk-dentro .bk-barra{padding:6px 8px 0}
  .bk-marca{font-size:16px}
  #bk-quien{display:none}
  .bk-derecha{gap:6px}
  .bk-derecha .bs{padding:4px 8px;font-size:11.5px}
  #bk-app{padding:10px 8px 40px}
}