function AppTopBar({ title, onAction }) {
  const { Badge, Button } = window.NeoGasDesignSystem_054cde;
  return (
    <header style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '20px 32px', borderBottom: '1px solid var(--border)', background: 'var(--cream)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 26, color: 'var(--forest-moss)', margin: 0 }}>{title}</h1>
        <Badge tone="success">sistema activo</Badge>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--text-muted)' }}>Hotel Copantl · SPS</span>
        <Button variant="primary" size="sm" onClick={onAction}>Programar recolección</Button>
        <div style={{ width: 38, height: 38, borderRadius: 'var(--radius-pill)', background: 'var(--sage)', color: 'var(--deep-moss)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 14 }}>HC</div>
      </div>
    </header>
  );
}